On button click I'am adding product information to local storage and setting it to context.

I'm using context in two places - header and products page, syntax is almost the same. There is a console.log in header and whenever i'am interacting with context it's instantly firing, confirming that context is working fine. However, when i enter products page i need to reload it one more time in order to get the data. Why is that?

Context file

import React, { useState, useEffect } from "react";

export const LikedContext = React.createContext([{}, () => {}]);

export const LikedProvider = (props) => {
  const [liked, setLiked] = useState(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      let likedData = localStorage.getItem("liked");

      likedData = likedData ? JSON.parse(likedData) : "";
      setLiked(likedData);
    }
  }, []);

  return (
    <LikedContext.Provider value={[liked, setLiked]}>
      {props.children}
    </LikedContext.Provider>
  );
};

Header

export const LikedProductsIcon = () => {
  const [liked, setLiked] = useContext(LikedContext);
  console.log("liked header", liked);

  const likedCount =
    null !== liked && Object.keys(liked).length ? liked.totalProductsCount : "";
  const totalPrice =
    null !== liked && Object.keys(liked).length ? liked.totalProductsPrice : "";

  return (
    <>
      <CartContainer to="/pamegti-produktai">
        <CountCircle>
          <HeartSvg />
          {likedCount ? <span>{likedCount}</span> : ""}
        </CountCircle>
      </CartContainer>
    </>
  );
};

Liked products page

const LikedProducts = () => {
  const [liked, setLiked] = useContext(LikedContext);

  console.log("liked page", liked);

  return (
    <Layout>
      <Container>
        {liked ? (
          liked.products.map((product, index) => (
            <ProductsCard product={product} blackText />
          ))
        ) : (
          <div>Pamėgtų produktų nėra.</div>
        )}
      </Container>
    </Layout>
  );
};