Type 'FC' is not assignable to type 'ScreenComponentType | undefined'

I'm having some issues figuring how to fix this in React native using React.FC.

I have a BottomNavigator.tsx

import React from "react";import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";import HomeScreen from "../screens/Home";import ScoreboardScreen from "../screens/Scoreboard";import AddWaterScreen from "../screens/AddWater";import BottomTab from "./BottomTab";import { DRINKER } from "../constants";const { Navigator, Screen } = createBottomTabNavigator();const BottomTabNavigator = () => {  return (<Navigator screenOptions={{ headerShown: false }} tabBar={BottomTab}><Screen        name="Home"        component={HomeScreen}        initialParams={{ id: DRINKER.id, name: DRINKER.name }}      /><Screen name="AddWater" component={AddWaterScreen} /><Screen name="Scoreboard" component={ScoreboardScreen} /></Navigator>  );};export default BottomTabNavigator;

However I'm getting this error at component={HomeScreen}

  Type 'FunctionComponent<Props>' is not assignable to type 'FunctionComponent<{}>'.    Types of parameters 'props' and 'props' are incompatible.      Type '{}' is not assignable to type 'Props'.

This is my HomeScreen component

import React, { useEffect } from "react";import {  Text,  TouchableOpacity,  StyleSheet,  SafeAreaView,  TouchableHighlight,} from "react-native";import { useDispatch } from "react-redux";import { hydrateyActions } from "../reducers/hydratey";import { Drinker } from "../types";type Props = {  id: string;  name: string;};export const HomeScreen: React.FC<Props> = (props: Drinker) => {  const dispatch = useDispatch();  useEffect(() => {    dispatch(hydrateyActions.getDrinker);  }, []);  return (<SafeAreaView style={styles.container}><Text style={styles.primaryHeader}>My Intake {props.name}</Text></SafeAreaView>  );};const styles = StyleSheet.create({  container: {    backgroundColor: "#323235CC",  },  primaryHeader: {    fontSize: 40,    fontWeight: "bold",    textAlign: "justify",    marginTop: "10%",    marginHorizontal: "5%",  },  secondaryHeader: {    fontSize: 12,  },});export default HomeScreen;

How can I solve this?