Warning: Expected server HTML to contain a matching <div> in <div> when use localStorage as params

Question

I think this warning appear when i work with localStorage, some answers in another page is use useEffect(), but I don't know how to use query or mutation in useEffect().How can I fix it?

export const productListForBill = () : GetProductForBill[] =>{
    const returnEmtpyArray : GetProductForBill[] = []
    if(typeof window !== "undefined"){
        if(localStorage.getItem("products"))
        {
            const tempProduct = JSON.parse(localStorage.getItem("products") || "")
            if(Array.isArray(tempProduct)){
                return tempProduct
            }
        }
    }
    return returnEmtpyArray
}


const Cart = () => {

    const { data } = useGetSomeProductQuery({
        variables: { productList: productListForBill() },
      });
  return (
    <>
      <Navbar />
      {data?.getSomeProduct ? (
        data.getSomeProduct.map((product) => (
          <div key={`${product.name}-${product.type}`}>
            name: {product.name} --|-- type: {product.type} --|-- amount :{" "}
            {product.amount} --|-- unitPrice : {product.unitPrice} --|-- total:{" "}
            {product.totalPrice}
          </div>
        )) 
      ) : (
        <div>Nothing in here</div>
      )}
    </>
  );
};
export const getStaticProps: GetStaticProps = async () => {
  const apolloClient = initializeApollo();
 
  await apolloClient.query({
    query: GetSomeProductDocument,
    variables: { productList: productListForBill() },
  });
  return addApolloState(apolloClient, {
    props: {},
  });
};

I have to type something for text checker of Stackoverflow, have a nice day!

code of useGetSomeProductQuery, i'm working with graphql and use codegen to generate it at client

@Query((_return) => [ProductOfBill], { nullable: true })
  async getSomeProduct(
    @Arg("productList", (_type) => [GetProductForBill])
    productList: GetProductForBill[]
  ): Promise<ProductOfBill[] | null | undefined> {
    try {
      const newList : ProductOfBill[] = await Promise.all(productList.map(async (product) => {
        const price = await Price.findOne({
          where: {
            type: product.type,
            product: product.productId,
          }
        });
          const newProductOfBill = ProductOfBill.create({
            name:product.name,
            amount:product.amount,
            type:product.type,
            unitPrice:price?.price
          })
          return newProductOfBill
      }))
      .then(list => {
        console.log(list)
        return list
      })
      .catch(_ => {
        const resultList : ProductOfBill[] = []
        return resultList
      })
      
      return newList;
    } catch (error) {
      console.log(error);
      return undefined;
    }
  }