Cannot read property of undefined in react navigation native with typescript

I'm building a react native app and I'm having trouble passing props to another screen using react-navigation/native.

Navigation set up

export type RootStackParamList = {  Home: HomeProps,  LoginDemo: undefined,  Login: undefined};const Stack = createStackNavigator<RootStackParamList>();const store = configureStore();export const Navigation: React.FC = () => {  return (<Provider store={store}><NavigationContainer><Stack.Navigator><Stack.Screen name="LoginDemo" component={LoginDemo} /><Stack.Screen name="Home" component={Home}/><Stack.Screen name="Login" component={LoginScreen} /></Stack.Navigator></NavigationContainer></Provider>  );};

Code that does the screen switching

React.useEffect(() => {    if (patrolUnits.completed) {      if (patrolUnits.error !== null)        showAlert("error", patrolUnits.error.toString());      else        navigation.replace('Home', {patrolUnitId: patrolUnits.data[0].id});    }  }, [patrolUnits.completed]);

The screen that I am switching to

export const Home: React.FC<RouteProp<RootStackParamList, "Home">> = routeProps => {    const props = routeProps.params;    const { patrolUnitId } = props;    return (<View><Text>{patrolUnitId.toString()}</Text></View>)};

And the props that should be passed

export type HomeProps = {    patrolUnitId: number;}

Can anyone tell me what I'm doing wrong. I've been trying to figure this out for hours. I've tried googling but almost everything that's recommended for me is for regular react, not react native.