Property 'category' does not exist on type 'Readonly<unknown>' and Property 'data' does not exist on type 'Readonly<unknown>'

I am trying to access the data from route.params sent from navigation screen, App is running fine but typescript conplain about my code "Property 'data' does not exist on type 'Readonly', Property 'category' does not exist on type 'Readonly'. if I console.log(route?.params?.category) & console.log(route?.params?.data) I will get the expected result. Here are my files.

types.tsx

import type { NativeStackScreenProps } from "@react-navigation/native-stack";

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

export type RootStackParamList = {
  HomeScreen: undefined;
  CategoryDetailScreen: { category: string };
  SeachDetailScreen: { data: string[] };
};

export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, Screen>;

export type Props = NativeStackScreenProps<RootStackParamList>;

RootJokeStack.tsx

const RootJokeStack = () => {
  return (
    <JokeSearch.Navigator initialRouteName="HomeScreen">
      <JokeSearch.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={() => ({
          headerShown: false,
        })}
      />
      <JokeSearch.Screen
        name="CategoryDetailScreen"
        component={CategoryDetailScreen}
        options={() => ({
          headerShown: false,
        })}
      />

      <JokeSearch.Screen
        name="SeachDetailScreen"
        component={SeachDetailScreen}
        options={() => ({
          headerShown: false,
        })}
      />
    </JokeSearch.Navigator>
  );
};
;
export default RootJokeStack;

HomeScreen.tsx

<FlatList
        data={categories}
        keyExtractor={(item) => item}
        renderItem={({ item }) => (
          <TouchableWithoutFeedback
            onPress={() => {
              navigation.navigate("CategoryDetailScreen", { category: item });
            }}
          >
            <View style={styles.imageView}>
              <ImageBackground
                style={styles.image}
                source={{
                  uri: "https://media.gettyimages.com/photos/chuck-norris-poses-with-two-uzis-his-sleeveless-denim-shirt-to-his-picture-id525603356",
                }}
              >
                <View style={styles.textView}>
                  <Text style={{ color: colors.cardBackground }}>{item}</Text>
                </View>
              </ImageBackground>
            </View>
          </TouchableWithoutFeedback>
        )}
        showsVerticalScrollIndicator={false}
        ListHeaderComponent={<Text style={styles.listHeader}>Categories</Text>}
        horizontal={false}
        numColumns={2}
      />

CategoryDetailScreen.tsx

const CategoryDetailScreen = ({ route, navigation }: Props) => {
  const [categoryDetails, setcategoryDetails] = React.useState<Category>();
  // console.log(route?.params?.category);

  const query: string = route?.params?.category;

  const getCategoryDetails = async () => {
    try {
      const response = await chuckNorris.get(`/random?category=${query}`);
      return response.data;
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getCategoryDetails().then((data) => {
      setcategoryDetails(data);
    });
  }, [query]);

SeachDetailScreen.tsx

const SeachDetailScreen = ({ route }: Props) => {
  const query = route?.params?.data;

  return (
    <View style={styles.container}>
      <SearchBarTitle data={query} />
      <FlatList
        data={query}
        keyExtractor={(item) => item}
        renderItem={({ item }) =>
          item ? (
            <View style={{ margin: 5 }}>
              <Text style={{ color: "#fff", fontSize: 20 }}>{item}</Text>
            </View>
          ) : null
        }
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
};

Click here to see the error route.params.category error

Click here to see the error route.params.data error