How to refresh flatlist when remove item from favorites list in react native?

This is my flatlist:

 <FlatList
                    data={filteredFilmData}
                    keyExtractor={(item, index) => item.id}
                    renderItem={renderFilmList}
                    disableVirtualization={true}
                    initialNumToRender={50}
                    maxToRenderPerBatch={50}
                    ListFooterComponent={openflatSpinner}
                    onEndReached={closeFlatSpinner}
                  />

renderItem:

const renderFilmList = (itemData) => {
    return (
      <ListTop100
        ...
        filmFavorite={itemData.item.favorite}
        ...
      />
    );
  };

ListTop100:

 const changeView = button => {
    if (buttonView.includes(button)) {
      //remove item from favorites.
      let toast = Toast.show('The movie removed from favorites!', {
        duration: setTimeout(function () {
          Toast.hide(toast);
        }, 3000),
        position: Toast.positions.CENTER,
        shadow: true,
        animation: true,
        hideOnPress: true,
        delay: 0,
      });
      setButtonView([]);
      let array = buttonView;
      for (var i = 0; i < array.length; i++) {
        if (array[i] === button) {
          array.splice(i, 1);
        }
      }
      setButtonView(array);
    } else {
      //add item to favorites.
      let toast = Toast.show('The movie added to favorites!', {
        duration: setTimeout(function () {
          Toast.hide(toast);
        }, 3000),
        position: Toast.positions.CENTER,
        shadow: true,
        animation: true,
        hideOnPress: true,
        delay: 0,
      });
      const buttons = [...buttonView, button];
      setButtonView(buttons);
    }
  };

  const addFavorite = async () => {
    const axios = require('axios');

    let config = {
      method: 'post',
      url: `${apiUrl}/movies/doFavorite`,
      headers: {
        Authorization: `Bearer ${user.token}`,
      },
      data: {
        user: user.id,
        movie: filmId,
      },
    };

    await axios(config)
      .then(response => {
        changeView(filmId);
      })
      .catch(error => {
        console.log(error);
      });
  };

  useEffect(() => {
    const favList = [];
    setButtonView([]);
    if (filmFavorite) {
      favList.push(filmId);
    }
    setButtonView(favList);
  }, []);

  return (
    <View style={styles.screen}>
      ...
          <View style={styles.favIconView}>
            <TouchableOpacity onPress={addFavorite}>
              {buttonView.includes(filmId) ? (
                <FavIcon size={Platform.OS == 'ios' ? ww(0.06) : ww(0.055)} />
              ) : (
                <UnFavIcon size={Platform.OS == 'ios' ? ww(0.06) : ww(0.055)} />
              )}
            </TouchableOpacity>
      ...
    </View>
  );

Favorites Screen:

const addFavorites = filmId => {
    let config = {
      method: 'post',
      url: `${apiUrl}/movies/doFavorite`,
      headers: {
        Authorization: `Bearer ${user.token}`,
      },
      data: {
        user: user.id,
        movie: filmId,
      },
    };

    axios(config)
      .then(response => {
        //console.log(JSON.stringify(response.data));
        // getFavorites();
        let fav = favorites;
        fav.shift(e => e.id === filmId);
        setFavorites(fav);
        let toast = Toast.show(`The movie removed from favorites!`, {
          duration: setTimeout(function () {
            Toast.hide(toast);
          }, 1000),
          position: Toast.positions.CENTER,
          shadow: true,
          animation: true,
          hideOnPress: true,
          delay: 0,
        });
        getFavorites();
      })
      .catch(error => {
        console.log(error);
      });
  };
  const getFavorites = () => {
    let config = {
      method: 'post',
      url: `${apiUrl}/movies/getFavorites`,
      headers: {
        Authorization: `Bearer ${user.token}`,
      },
      data: {
        user: user.id,
      },
    };

    axios(config)
      .then(response => {
        //console.log(JSON.stringify(response.data.data));
        setFavorites(response.data.data);
        //console.log(favorites);
      })
      .catch(error => {
        console.log(error);
      });
  };

  useEffect(() => {
    getFavorites();
  }, []);

  return (
    <ImageBackground
      source={require('../assets/images/background.png')}
      style={styles.background}>
      ...
          <View style={styles.scroll}>
            <ScrollView>
              {favorites?.map((item, index) => (
                <View key={index}>
                  ...
                    <View style={styles.favIconView}>
                      <TouchableOpacity
                        onPress={() => {
                          addFavorites(item.id);
                        }}>
                        <View style={styles.favoritesIconView}>
                          <FavIcon size={ww(0.05)} />
                        </View>
                      </TouchableOpacity>
                    </View>
                  ...
              ))}
            </ScrollView>
          </View>
        )}
      </SafeAreaView>
    </ImageBackground>
  );
};

Problem: I can add or remove item to favorites list on flatlist but at favorites screen when i remove an item from list, flatlist can not update. That item looks still favourite. I tried onrefresh for flatlist but it doesnt work or i failed. Also i tried :

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      //code
    });
    return unsubscribe;
  }, [navigation]);

but i dont want to refresh page every navigation. Please help me, thank you from now!