UseContext Doesn't Re-render when an component value is updated

I'm using React's context api to store an array of Favorite products.The favorites Array is filled with Boolean Value False and turned to true based on id of the products.There is collection page which displays productCards having an addtoFavorite button,Upon clicking the button disables but if the product is already present in favorites it has to disabled.

Now it works perfectly fine for the 1st Page , disabling only favorite products with the array containing values true and false based on index of the products but when navigated to another page it disables other products at the same index even though the favorites array is updated to have all values as false.If we Navigate Back or move to another page its value now remains false in the array.It looks as if UseContext updates the value of the array late or doesn't rerender on change.

I have tried implementing other stuffs but it still wouldn't re-render when the array was changed.

Here's the FavoritesContext:

const FavoritesContext = React.createContext({
  addToFavorites: (id,index) => {},
  favorites:[],
  storedFavorites:(data) => {}
});


export const FavoritesContextProvider = (props) => {


  const authCtx = useContext(AuthContext)
  const token = authCtx.token;
  const userId = authCtx.userId;

  const [favorites,setFavorites] = useState([]);

  // To retrieve stored favorites from FireBase
  const retrieveStoredFavorites = (data) => {
    let fav = new Array(data.length).fill(false);
    setFavorites(fav);

    let queryParams = '?auth=' + token + '&orderBy="userId"&equalTo="' + userId + '"';
      axiosInstance.get('/Favorites.json' + queryParams)
      .then((response) => {
        let fetchProductData = [];
        for (let key in response.data) {
          fetchProductData.push({
            ...response.data[key],
            productId: key,
          });
        }
        let favoriteList = [];
        //To find if the product is present in the Fetched Favorite products List
        for(let i=0;i<data.length;i++){
          let ids = data[i].id
          let favoriteProducts = !!fetchProductData.find((product)=>product.id==ids)
          favoriteList.push(favoriteProducts)
        }
        //console.log(favoriteList)
        setFavorites(favoriteList)
      });
  }

  //Add to Favorites
  const addTofavoritesHandler = (Product,index) => {
    axiosInstance
    .post('Favorites.json?auth='+token,Product)
    .then((response) => {
      //console.log("SUCCESS")
    })
    .catch((error) => console.log(error));
    let favoriteOnes = [...favorites];
    favoriteOnes[index] = true;
    setFavorites(favoriteOnes);
  };


  const contextValue = {
      addToFavorites:addTofavoritesHandler,
      favorites:favorites,
      storedFavorites:retrieveStoredFavorites
  };

  return (
      <FavoritesContext.Provider value={contextValue}>
        {props.children}
      </FavoritesContext.Provider>
  );
};

export default FavoritesContext;

Now here is the Collection Page

const CollectionPage = () => {
  const classes = useStyles();
  const [products, setProducts] = useState([]);
  const [filteredProducts, setFilteredProducts] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [productsPerPage] = useState(9);
  const [loading, setLoading] = useState(false);    
  const { enqueueSnackbar } = useSnackbar();

  const authCtx = useContext(AuthContext);
  const token = authCtx.token;
  const userId = authCtx.userId;

  const favoriteCtx = useContext(FavoritesContext)
  const favorites = favoriteCtx.favorites
  

  //To Display the Products in Main Content
  const DisplayProductsHandler = (Data) => {
    //Get value of FirstPageNumber and LastPageNumber
    const indexOfLastPage = currentPage * productsPerPage;
    const indexOfFirstPage = indexOfLastPage - productsPerPage;
    //console.log("[Products]")
    const productData = Data.slice(indexOfFirstPage, indexOfLastPage);
    favoriteCtx.storedFavorites(productData)
    //console.log(productData);
    const updatedProductData = productData.map((product,index) => {
      return (
        <ProductCard
          Link={`/Info/${product.id}`}
          key={product.id}
          Title={product.productName}
          Image={product.productImage}
          Value={product.price}
          addToFavorites={() => addTofavoritesHandler(product,index)}
          addToCart={() => addToCartHandler(product)}
          disableFavoriteButton={favorites[index]}
        />
      );
    });
    setProducts(updatedProductData);
  };

  //Display the Products from DisplayProductHandler
  useEffect(() => {
    setLoading(true);
    //Scroll To Top When Reloaded
    window.scrollTo(0, 0);
    //To Display the Products
    if (filteredProducts.length === 0) {
      DisplayProductsHandler(ProductData);
    } else {
      DisplayProductsHandler(filteredProducts);
    }
    setLoading(false);
  }, [currentPage, filteredProducts]);

  //Add to Favorites Handler
  const addTofavoritesHandler =(likedProduct,index) => {
    setLoading(true);
    let updatedLikedProduct = {
      ...likedProduct,
      userId: userId,
    };
    favoriteCtx.addToFavorites(updatedLikedProduct,index)
    //To Display ADDED TO FAVORITES Message using useSnackbar()
    enqueueSnackbar("ADDED TO FAVORITES", { variant: "success" })
    setLoading(false);
  };

I need it to re-render every time the array in context is updated.