How can I navigate from one page to another in React-Native? I try to use navigation, but I get the error: Invalid hook call

I have a class which renders a button which should redirect me to another page. Can I use a navigator created by using useNavigation() inside render() as I did? I don't think so, because I tried this way and it didn't work. Can you please tell me how can I solve this?When I tried to use it by transforming the class in a functional component, I managed to make it work. But I would like to do the same inside my class.

export class PetList extends Component<any, any> {    constructor(props: any) {        super(props);        this.state = {pets:[]};    }    render() {        let navigation = useNavigation();        return (<View style={styles.bigContainer}><Card containerStyle={styles.container}><Card containerStyle={styles.container}><Card.Title style={styles.title}> MY PETS</Card.Title><Card.Divider/>                        {                            this.state.pets.map((u:any, i:any) => {                                return (<Card key={i} containerStyle={styles.container}><View style={styles.pet}><Image                                                style={styles.image}                                                resizeMode="cover"                                                source={require('../photos/'+ String(3) +'.jpg' )}                                                alt="Pet photo"                                            /><View style={styles.text}><Text style={styles.name}>{u.name} </Text><Text style={styles.description}>{u.description} </Text></View></View></Card>                                );                            })                        }</Card><Button onPress={() => navigation.navigate('addPetForm')}>+</Button></Card></View>        );    }}