Why won't the navigation read the id from a nested array?

I revised me question after finding the source of my problem. For some reason the navigator doesn't read the id named 'topic' which is declared in the interface. I'm not entirely sure how this is happening as it works in the return scope

import { View, Text, StyleSheet, Image, Pressable} from "react-native";
import React from "react";
import Colors from "../../constants/Colors";
import { Topic } from "../types/models";
import { useNavigation } from "@react-navigation/native";

interface TopicCellProps {
    topic: Topic; //--but is declared here
}

const navigation = useNavigation();

const onPress = () => {
    navigation.navigate("Topic", {id: topic.id}); //cannot find name topic
};

const TopicCell = ({topic}: TopicCellProps) => {
    return (
        <Pressable 
        onPress={onPress}
        style={styles.container}>
                <View style={[styles.circle, {
                    width: "80%",
                    borderRadius: 100,
                    borderWidth: 5,
                    borderColor: Colors.light.dark,
                    aspectRatio: 1,
                    backgroundColor: Colors.light.secondary,
                    justifyContent: "center",
                    alignItems: "center",
                    },
                    ]}>
                    <Image source={{uri: topic.icon}} style={styles.image}/>
                </View>
                <Text style={styles.title}>{topic.title}</Text>
                </Pressable>
    );
};

The resources I am trying to access are listed like this:

//"./types/models"
export type Topic = {
    id: string;
    title: string;
    icon: string;
    level: number;
    resources?: resources[];
};

export type resources = {
    id: string;
    title: string;
    url: string;
}

//"./topics.ts"
id: "1",
    title: "Live Chat",
    icon: "https://img.icons8.com/color/48/000000/health-book.png",
    level: 1,
    resources: [
        {
            id: "1",
            title: "Profile1",
            url: "https://www.coliru.com/",
        }, {
            id: "2",
            title: "Profile2",
            url: "https://www.coliru.com/",
        },
    ],

Found The location of the pressable functions in the navigation folder. I used the method on each page I want to display with a custom button and it works now.