the are about three more components between this one and the one i want it to function in, so i keep on passing it down as a prop till i get to the component i want. it is supposed to run when the user clicks a button but i get an error that this.props.route.params.ToggleFavorites is not a function please help!!!!

 constructor(props){
    super(props)
    this.state = {
      hymnNumber: '',
      favorites: []
    }
  }

  Sort = () => {
    let x = [...this.state.favorites] 
    for(let i=0; i<x.length-1;i++){
      if(parseInt(x[i+1].slice(0,2)) < parseInt(x[i].slice(0,2))){
        let y = x[i]
        x[i] = x[i+1]
        x[i+1] = y
        this.Sort()
      }
    }
    this.setState({favorites: [...x]})
  }

  ToggleFavorites = (id) =>{
    const item = ContentData.filter(item => item.slice(0, 2) === id)
    let arr = [...this.state.favorites]

    if(arr.includes(item[0]) === false){
      arr = [...arr, ...item]
    }else{
      arr = arr.filter(favorite => favorite === item[0])
    }
    this.setState({favorites: [...arr]})
    this.Sort()
  }
  clearAll = () =>{
    this.setState({favorites: []})
  }

  render(){
    return (     
        <View>
          <Pressable style={styles.buttonStyles} onPress = {() => this.props.navigation.push('Favorites', {favorites: this.state.favorites, clearAll: this.clearAll})}>
            <Text style={styles.buttonText}>favorites</Text>
          </Pressable>
          <Pressable style={styles.buttonStyles} onPress={() => this.props.navigation.push('Search', {favorites: this.state.favorites, ToggleFavorites: this.ToggleFavorites})}>
)}}```