React native navigation unable to navigate

I am using react navigation in my react native app but am unable to navigate between pages.
Here is my app.ts

import React, { useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import { NavigationContainer } from "@react-navigation/native";
import RootStack from "./App/Routes/routes";
import { PaperProvider } from "react-native-paper";
import { ToastProvider } from "react-native-toast-notifications";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import * as NavigationBar from "expo-navigation-bar";

function App() {
  useEffect(() => {
    const navColor = () => {
      NavigationBar.setVisibilityAsync("hidden");
    };
    navColor();
  }, []);
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <ToastProvider
          successColor="#37e9bb"
          dangerColor="#FF5449"
          swipeEnabled
          style={{ borderRadius: 30 }}
        >
          <PaperProvider>
            <RootStack />
          </PaperProvider>
        </ToastProvider>
        <StatusBar style="dark" backgroundColor="#FFEA70" />
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}

export default App;

here are my routes in routes.tsx

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../Screens/HomeScreen";
import ProfileScreen from "../Screens/ProfileScreen";
import EmployeeDetailScreen from "../Screens/EmployeeDetailScreen";
import LoginScreen from "../Screens/Login";
import SignUpScreen from "../Screens/SignUp";
import { useAuthStatus } from "../Hooks/useAuthStatus";

const Stack = createNativeStackNavigator();

export default function RootStack() {
  const isSignedIn = useAuthStatus();
  return (
    <Stack.Navigator initialRouteName={isSignedIn ? "Home" : "SignIn"}>
      {isSignedIn ? (
        <>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
              header: () => null,
              animation: "slide_from_bottom",
            }}
          />
          <Stack.Screen
            name="Profile"
            component={ProfileScreen}
            options={{
              header: () => null,
              animation: "simple_push",
            }}
          />
          <Stack.Screen
            name="EmployeeDets"
            component={EmployeeDetailScreen}
            options={{
              header: () => null,
              animation: "simple_push",
            }}
          />
        </>
      ) : (
        <>
          <Stack.Screen
            name="SignIn"
            component={LoginScreen}
            options={{
              header: () => null,
              animation: "slide_from_right",
            }}
            initialParams={{ heading: "Login", isSignIn: true }}
          />
          <Stack.Screen
            name="SignUp"
            component={SignUpScreen}
            options={{
              header: () => null,
              animation: "slide_from_left",
            }}
            initialParams={{ heading: "Signup", isSignIn: false }}
          />
        </>
      )}
    </Stack.Navigator>
  );
}

Now whenever I am trying to navigate between the pages like this

const navigation = useNavigation();
navigation.navigate("Home");

it gives me this error

The action ‘NAVIGATE’ with payload {“name”:”Home”} was not handled by any navigator.

Do you have a screen named ‘Home’?

If you’re trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

This is a development-only warning and won’t be shown in production.