React Native Navigation오류

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import Map from './src/pages/Map';
import Pronunciation from './src/pages/Pronunciation';
import HomeScreen from './src/pages/HomeScreen';
import IsRecord from './src/pages/IsRecord';
import Footer from './src/components/footer';

type TabParamList = {
  Map: undefined;
  Prosecutor: undefined;
  Home: undefined;
  Recorded: undefined;
  Profile: undefined;
};

const Tab = createBottomTabNavigator<TabParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{ headerShown: false }}>
        <Tab.Screen name="Map" component={Map} />
        <Tab.Screen name="Prosecutor" component={Pronunciation} />
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Recorded" component={IsRecord} />
        <Tab.Screen name="Profile" component={Pronunciation} />
      </Tab.Navigator>
      {/* <Footer /> */}
    </NavigationContainer>
  );
}

import React from 'react';
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { useNavigation } from '@react-navigation/native';
import Home from '@/src/assets/images/icons/Home'
import Map  from '@/src/assets/images/icons/Maping'
import Prosecutor from '@/src/assets/images/icons/Prosecutor'
import Recorded  from '@/src/assets/images/icons/Recorded'
import Profile  from '@/src/assets/images/icons/Profile'
import styled from 'styled-components/native';



type TabParamList = {
  Map: undefined;
  Prosecutor: undefined;
  Home: undefined;
  Recorded: undefined;
  Profile: undefined;
};

export default function Footer() {
  const navigation = useNavigation<BottomTabNavigationProp<TabParamList>>();

  return (
    <FooterContainer>
      <FooterBar>
        <FooterButton onPress={() => navigation.navigate('Map')} activeOpacity={0.6}>
          <IconWrapper>
            <Map />
          </IconWrapper>
          <FooterText>의료기관</FooterText>
        </FooterButton>
        <FooterButton onPress={() => navigation.navigate('Prosecutor')} activeOpacity={0.6}>
          <IconWrapper>
            <Prosecutor />
          </IconWrapper>
          <FooterText>검사</FooterText>
        </FooterButton>
        <FooterButton onPress={() => navigation.navigate('Home')} activeOpacity={0.6}>
          <IconWrapper>
            <Home />
          </IconWrapper>
          <FooterText>홈</FooterText>
        </FooterButton>
        <FooterButton onPress={() => navigation.navigate('Recorded')} activeOpacity={0.6}>
          <IconWrapper>
            <Recorded />
          </IconWrapper>
          <FooterText>기록</FooterText>
        </FooterButton>
        <FooterButton onPress={() => navigation.navigate('Profile')} activeOpacity={0.6}>
          <IconWrapper>
            <Profile />
          </IconWrapper>
          <FooterText>프로필</FooterText>
        </FooterButton>
      </FooterBar>
    </FooterContainer>
  );
}

const FooterContainer = styled.View`
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: white;
  padding: 12px 0;
  border-radius: 25px 25px 0 0;
  box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.6); /* rgba 제일 끝에꺼가 그림자 짙게하는거  */
  elevation: 5; 
`;

const FooterBar = styled.View`
  width: 98%;
  flex-direction: row;
  justify-content: space-around;
  padding: 1%;
`;

const FooterButton = styled.TouchableOpacity`
  align-items: center;
`;

const IconWrapper = styled.View`
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center; 
`;

const FooterText = styled.Text`
  color:rgb(0, 0, 0);
  font-weight: 500;
`;

이렇게 연결을 했는데.. 

 (NOBRIDGE) ERROR  The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator.

Do you have a route named 'Home'?

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

계속 이러한 오류가 떠요..