createSharedElementStackNavigator returns navigation.dangerouslyGetState

I'm currently facing an error using the react navigation shared element within my project. When defining the Stack and using Stack.Navigator, it returns an error with

navigation.dangerouslyGetState

I've read the documentation and viewed a number of videos on the net to see if i am missing anything. However, could not come to any conclusion.

Please find code below:

import React from "react"import { createStackNavigator } from '@react-navigation/stack';import { createSharedElementStackNavigator } from 'react-navigation-shared-element';import { NavigationContainer, DefaultTheme, useLinkProps } from '@react-navigation/native';import Search from "./screens/Search"import Home from "./screens/Home"import Entypo from "react-native-vector-icons/Entypo";import {  Text, TouchableOpacity, View } from "react-native";export default function Navigation( { navigation }) {    const Stack = createSharedElementStackNavigator();    const MyTheme = {        ...DefaultTheme,        colors: {          ...DefaultTheme.colors,          background: '#FFF',        }    }    return (<NavigationContainer theme={MyTheme}><Stack.Navigator initialRouteName="Home"><Stack.Screen name="Home" component={Home} options={({route}) => ({                    headerShown: false,                })}/><Stack.Screen name="Search" component={Search} options={({route}) => ({                    headerShown: true,                    headerTitle: 'Search',                    headerTitleStyle: {fontSize: 22, fontFamily: 'Gilroy-Bold'},                    headerBackTitleVisible: false,                    headerShadowVisible: false,                    headerBackImage: () => (<View style={{backgroundColor: '#ffffff', borderRadius: '50%', marginLeft: 15, marginBottom: 5}}><Entypo name="chevron-small-left" size={30} color="#37BD6B"/></View>                    )                })}/></Stack.Navigator></NavigationContainer>    )}

When reading over the error, this is displayed:

Type '{ children: Element[]; initialRouteName: string; }' is notassignable to type 'IntrinsicAttributes &((Pick<DefaultRouterOptions & { children: ReactNode;screenOptions?: StackNavigationOptions | ((props: { ...; }) =>StackNavigationOptions) | undefined; } & StackNavigationConfig,"children" | ... 2 more ... | "keyboardHandlingEnabled"> & { ...; }) |PropsWithChildren<...>)'. Type '{ children: Element[];initialRouteName: string; }' is missing the following properties fromtype 'Pick<DefaultRouterOptions & { children: ReactNode;screenOptions?: StackNavigationOptions | ((props: { route:RouteProp<Record<string, object | undefined>, string>; navigation:any; }) => StackNavigationOptions) | undefined; } &StackNavigationConfig, "children" | ... 2 more ... |"keyboardHandlingEnabled">': mode, headerMode,keyboardHandlingEnabledts(2322)

I dont think im missing any props according to the documentation

Thanks in advance