Component unmounts when going to next screen

Hey guys. I am struggling here on an issue I can't figure out. So basically what I have, is 1 image that I want to transition into a full screen Image on a new screen. I followed the docs and its no big hack, just really simple, but as soon as the Image is almost on the new screen, it unmounts or something and then shows again.

**Showcase of the problem:**

https://user-images.githubusercontent.com/56917803/149679950-dd454864-e3a9-454c-a796-06b191ef3fc8.mov

I have a Navigator:
```javascript
import { createSharedElementStackNavigator } from "react-navigation-shared-element"
import ChatImgGallery from "./ChatImgGallery"
import OneToOneScreen from "./OneToOneScreen"

const iosTransitionSpec = {
animation: "spring",
config: {
stiffness: 1000,
damping: 500,
mass: 3,
overshootClamping: true,
restDisplacementThreshold: 10,
restSpeedThreshold: 10,
},
}

const options = {
cardStyleInterpolator: ({ current: { progress } }) => {
return { cardStyle: { opacity: progress } }
},
gestureEnabled: false,
// ...TransitionPresets.ModalSlideFromBottomIOS,
transitionSpec: {
open: iosTransitionSpec,
close: iosTransitionSpec,
},
}

const ChatStack = createSharedElementStackNavigator()

export default function ChatNavigator() {
return (


{
const { item, uri } = route.params
return [`item.${uri}.photo`]
}}
options={() => options}
/>

)
}
```

This is a Component called "NormalMessage" inside the "OneToOneScreen":
```javascript
{message?.files?.length > 0
? message?.files.map((file, index) => (

navigate("ChatImgGallery", {
item: message,
file: index,
uri: file.location,
})
}
>




))
: null}
```

This is the component "ChatImgGallery":

```javascript
import React from "react"
import {
View,
StyleSheet,
Image,
TouchableOpacity,
Dimensions,
} from "react-native"
import { SharedElement } from "react-navigation-shared-element"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { useNavigation } from "@react-navigation/native"
import { Ionicons } from "@expo/vector-icons"

const { height, width } = Dimensions.get("window")

export default function ChatImgGallery({ route }) {
const { bottom, top } = useSafeAreaInsets()
const { item, uri } = route.params
const { goBack } = useNavigation()

return (










)
}

const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
},
imgView: {
...StyleSheet.absoluteFillObject,
},
topView: {
width: "100%",
backgroundColor: "rgba(0,0,0,0.6)",
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingHorizontal: 20,
position: "absolute",
left: 0,
top: 0,
zIndex: 2,
},
})

```

Important package versions:
```json
"expo": "~44.0.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"@react-navigation/native": "5.x.x",
"@react-navigation/stack": "5.x.x",
"react-native-screens": "~3.0.0",
"react-native-shared-element": "^0.8.3",
"react-navigation": "^4.4.4",
"react-navigation-shared-element": "^3.1.3",
"react-navigation-stack": "^2.10.4",
```

Reproduce the transition from NormalMessage in OneToOneScreen to ChatImgGallery using the shared-element navigator and the listed Expo, React Native, and navigation versions. Inspect the shared element IDs, route parameters, and transition options shown in the issue; done means the image reaches the next screen without visibly unmounting and reappearing.

Written by the indexing model from the issue text.