How to solve route.params undefined in react native screens typescript

I have this below where I fetched country's names from an API, and displayed them on the screen using routes. Now, I'd like to display item.country as the headerTitle. However, I am getting an undefined error for the route.params. How can I fix this?

LocationDataScreen.tsx

function LocationDataScreen({ route, navigation }) {  const { item } = navigation.state.params || {};    const countryName = item.country;  return (<View style={styles.container}><Text>{countryName}</Text><Text>{item.cases}</Text></View>  );}

ItemView.tsx

const ItemView = ({ item }) => {    return (<RectButton        onPress={() =>          navigate("LocationDataScreen", { item: item, name: item.country })        }><Text style={[styles.itemStyle, { textTransform: "capitalize" }]}>          {item.id}          {item.country.toUpperCase()}</Text></RectButton>    );  };

App.tsx

<AppStack.Navigator initialRouteName="SearchScreen"><AppStack.Screen name="SearchScreen" component={SearchScreen} /><AppStack.Screen          name="LocationDataScreen"          component={LocationDataScreen}          options={({ route }) => ({            headerLargeTitle: true,            title: route.params.item,          })}        />