React Native Stack Navigation Modal Not Sliding

I'm new to React Native and I'm trying to navigate to one of my screens. I would like the screen to open as a modal. Apparently, you should apply the screenOptions={{ presentation: 'modal'}} to the Stack.Navigator. The screen is opening but not as a modal i.e it does not slide from bottom to top and does not function like a modal does. It just opens the default way. I've added my Navigator code below. I'm also nesting navigators? Could the nesting be the issue?

import React from 'react';
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import ListingsScreen from '../screens/ListingsScreen';
import ListingDetailsScreen from '../screens/ListingDetailsScreen';

const Stack = createNativeStackNavigator()
const FeedNavigator = () => (
  <Stack.Navigator screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen name="Listings" component={ListingsScreen} />
    <Stack.Screen name="Listing Details" component={ListingDetailsScreen} options={{ headerShown: false }} />
  </Stack.Navigator>
)

export default FeedNavigator;

I figured out my problem.

I was using

import { createNativeStackNavigator } from "@react-navigation/native-stack";

I changed it to

import { createStackNavigator } from "@react-navigation/stack";

I don't know why it worked for createStackNavigator and not createNativeStackNavigator.

I'm not going to question it, too much to do, too little time