React Navigation modal V6 with expo

Good day, I tried using react-navigation 6 to display a modal using presentation: "modal" as specified on the docs. But it is not giving me the desired output. The modal does not display as a modal but as a normal navigated screen.Below I recreated the same issue but in a simple way. Thanks in advance :).

import React, { FC } from "react";import { View, Text, TouchableOpacity, Button } from "react-native";import { createNativeStackNavigator } from "@react-navigation/native-stack";import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";interface Props {  // navigation :}const Tab = createMaterialBottomTabNavigator();const Stack = createNativeStackNavigator();const Home: FC = ({ navigation }) => {  return (<View><Text>Welcome Home</Text><TouchableOpacity onPress={() => navigation.navigate("Details")}><Text>Move to Details without tabs</Text></TouchableOpacity></View>  );};const Details: FC = ({ navigation }) => {  return (<View><Text>Welcome Details</Text><Button        onPress={() => navigation.navigate("MyModal")}        title="Open Modal"      /></View>  );};const ViewDetails: FC = (props: Props) => {  return (<View><Text>Welcome ViewDetails</Text></View>  );};const Feed: FC = (props: Props) => {  return (<View><Text>Welcome Feed</Text></View>  );};const Profile: FC = (props: Props) => {  return (<View><Text>Welcome Profile</Text></View>  );};const HomeTab: FC = (props: Props) => {  return (<Tab.Navigator><Tab.Screen name="Home" component={Home} /><Tab.Screen name="Feed" component={Feed} /><Tab.Screen name="Profile" component={Profile} /></Tab.Navigator>  );};function ModalScreen({ navigation }) {  return (<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}><Text style={{ fontSize: 30 }}>This is a modal!</Text><Button onPress={() => navigation.goBack()} title="Dismiss" /></View>  );}const RootStackNavigator = (props: Props) => {  return (<Stack.Navigator><Stack.Screen name="HomeTab" component={HomeTab} /><Stack.Screen name="Details" component={Details} /><Stack.Screen name="ViewDetails" component={ViewDetails} /><Stack.Group screenOptions={{ presentation: "modal" }}><Stack.Screen name="MyModal" component={ModalScreen} /></Stack.Group></Stack.Navigator>  );};export default RootStackNavigator;please ignore the types as I purposely omitted them to quickly recreate this code snippet.