TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[32], "react-native-safe-area-context").SafeAreaView')

I am trying to implement chat app using react-native below is my dependencies

"dependencies": {"@react-native-async-storage/async-storage": "~1.17.3","@react-native-community/masked-view": "^0.1.11","@react-navigation/bottom-tabs": "^6.3.3","@react-navigation/native": "^6.0.11","@react-navigation/stack": "^6.2.2","@reduxjs/toolkit": "^1.8.5","@types/react-redux": "^7.1.24","@types/redux-logger": "^3.0.9","expo": "~46.0.8","expo-splash-screen": "^0.16.2","expo-status-bar": "~1.4.0","firebase": "^9.9.3","native-base": "^3.4.13","react": "18.0.0","react-dom": "18.0.0","react-hook-form": "^7.34.2","react-native": "0.69.5","react-native-gesture-handler": "^2.5.0","react-native-gifted-chat": "^1.0.4","react-native-reanimated": "~2.9.1","react-native-safe-area": "^0.5.1","react-native-safe-area-context": "4.3.1","react-native-screens": "~3.15.0","react-native-svg": "12.3.0","react-native-vector-icons": "^9.2.0","react-native-web": "~0.18.7","react-redux": "^8.0.2","redux": "^4.2.0","redux-logger": "^3.0.6","save-dev": "^0.0.1-security"  },"devDependencies": {"@babel/core": "^7.12.9","@types/react": "~18.0.14","@types/react-native": "~0.69.1","typescript": "~4.3.5"  },

This is my chat screen

const ChatScreen = ({ navigation, route }: any) => {    const { data } = route.params;    const [messages, setMessages] = React.useState<any>([]);    React.useLayoutEffect(() => {        navigation.setOptions({            headerTitle: () => (<HStack style={{ marginLeft: 0 }} justifyContent={'center'} fontWeight={'bold'} fontSize={'lg'} alignItems={'center'} space={3}><Avatar source={{ uri: data.avatar as any }}                    /><Text numberOfLines={1}>{`${data.lastName} ${data.firstName}`}</Text></HStack>            ),        });    }, [navigation]);    React.useLayoutEffect(() => {        setMessages([            {                _id: 1,                text: 'Hello developer',                createdAt: new Date(),                user: {                    _id: 2,                    name: 'React Native',                    avatar: 'https://placeimg.com/140/140/any',                },            },        ])    }, []);    const onSend = React.useCallback((messages = []) => {        setMessages((previousMessages: never[] | undefined) => GiftedChat.append(previousMessages, messages))    }, []);    return (<React.Fragment><View style={{ flex: 1 }}><GiftedChat                    messages={messages}                    showAvatarForEveryMessage={true}                    onSend={messages => onSend(messages as any)}                    user={{                        _id: auth?.currentUser?.email as any,                        name: auth?.currentUser?.displayName as any,                        avatar: auth?.currentUser?.photoURL as any                    }}                /></View>            {                Platform.OS === 'android'&& <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset ={50} />            }</React.Fragment>    )}export default memo(ChatScreen);

But after running my app the error below occurredError log 1Error Log 2Error log 3Error log 4Error from log 1

TypeError: undefined is not an object (evaluating'_$$_REQUIRE(_dependencyMap[32],"react-native-safe-area-context").SafeAreaView')Error from log 2Invariant Violation: Tried to register two views with the same nameRNCSafeAreaView

Error From log 3

Error: Requiring module"node_modules\react-native-gifted-chat\node_modules\react-native-safe-area-context\src\index.tsx",which threw an exception: Invariant Violation: Tried to register twoviews with the same name RNCSafeAreaView

Error from log 4

TypeError: undefined is not an object (evaluating'_$$_REQUIRE(_dependencyMap[32],"react-native-safe-area-context").SafeAreaView')

At the moment I don't know what to do please I need help.