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.