Shared element transition only works one time

## bug
- The shared element only works the first time after the app opens.
- When going back from the detail screen, it's also not animated.

## Expected behavior
The shared element transition works on all cards and when going back

## Demo
https://user-images.githubusercontent.com/36442007/135582689-e0d557b5-f31f-4e88-884b-ce5d74958afa.mov

## Code
### app.tsx
```
const RootStack = createSharedElementStackNavigator()

return (


{
const { params } = route
return ['headerImage' + params.id]
}}
options={{
cardStyleInterpolator: ({ current: { progress } }) => {
return { cardStyle: { opacity: progress } }
},
}}
/>

)

```

### Card.tsx
```
const ProductCard: FC = ({ product, style }) => {
const navigation = useNavigation()

const price = useLocalizePrice(priceDetails?.price, priceDetails.currency)

return (

//@ts-ignore
navigation.navigate('ProductDetail', {
id: product.id,
})
}
>






)
}
```

### Detail.tsx
```
export default function ProductDetail() {
const { params } = useRoute>()
const { id } = params

const { bottom } = useSafeAreaInsets()
const scrollY = useRef(new Animated.Value(0)).current

const onScroll = Animated.event(
[
{
nativeEvent: {
contentOffset: {
y: scrollY,
},
},
},
],
{
useNativeDriver: true,
}
)

return (







)
}
```

Start with the navigator configuration in app.tsx, then compare the shared element IDs and navigation flow in Card.tsx and Detail.tsx. Reproduce transitions across multiple cards and when navigating back. Done means the shared element animation works every time in both directions.

Written by the indexing model from the issue text.