I have a drawer with two components, Home screen and todoList. From todoList page I want to go to Add Item page. So when I nest my stack navigator and navigate to todolist page from drawer, When i click the + button in todolist it says “The action ‘NAVIGATE’ with payload {“name”:”AddNewItem”} was not handled by any navigator.Do you have a screen named ‘AddNewItem’?.”

I read the documentation but I am not able to resolve this issue pls help. Code and images are attached below

import { NavigationContainer } from "@react-navigation/native";
import React from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import 'react-native-gesture-handler';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from "./src/pages/HomeScreen";
import TodoList from "./src/pages/TodoList";
import { Button } from "react-native-paper";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import AddNewItem from "./src/pages/AddNewItem";
function App() {

  const Drawer = createDrawerNavigator()

  const Stack = createNativeStackNavigator();
  const MyStack=()=>{
    return(
      <Stack.Navigator initialRouteName="TodoList">
          <Stack.Screen name="To do List" component={TodoList}></Stack.Screen>
          <Stack.Screen name="Add new Item" component={AddNewItem}></Stack.Screen>
      </Stack.Navigator>
    )
  }
  return (
    <NavigationContainer>
      <SafeAreaProvider>
        <Drawer.Navigator initialRouteName="Feed" backBehavior="history">
          <Drawer.Screen name="Home" component={HomeScreen} options={{headerTitle:"My Home",headerRight:()=>(<Button mode="contained" style={{ margin: 8 }} onPress={() => console.log("hello")}>Login</Button>)}} />
          <Drawer.Screen name="TodoList" component={MyStack} />
          
        </Drawer.Navigator>
      </SafeAreaProvider>
    </NavigationContainer>


  )
}
export default App;

Code of the App Component

import { useState } from "react"
import { View, Text } from "react-native"
import { useAppSelector } from "../redux/Hooks/hooks"
import { FAB } from 'react-native-paper';
import { useNavigation } from "@react-navigation/native";
function TodoList() {
    const [input, setInput] = useState('')
    const pending = useAppSelector((state) => state.pending.value)
    const navigation = useNavigation()
    return (
        <>
            <View style={{ justifyContent: "center", margin: 10 }}>
                <View>
                    <Text style={{ color: "black", fontSize: 20, alignItems: "center" }}>Pending Works</Text>

                </View>
                <FAB icon="plus" onPress={() => navigation.navigate("AddNewItem" as never)}></FAB>
            </View>
        </>


    )
}
export default TodoList

code of todolist page

I read the documentation of nested navigation but it did not work