How to persist data in react even browser refreshed

Functions such as add and remove from cart works fine. But the data is not saved successfully after the browser is refreshed. How to keep the data in the cart even when the browser is refreshed.

here is my code. if there is any code you would like to see let me know

  import React, { useEffect } from "react";
  import { useStateValue } from "../hooks/StateProvider";

  function CheckoutPage() {
  const [{ basket }, dispatch] = useStateValue();

  useEffect(() => {
    window.localStorage.setItem("basket", JSON.stringify(basket));
  }, [basket]);

  useEffect(() => {
    const basketData = window.localStorage.getItem("basket");
    if (basketData !== null) dispatch(JSON.parse(basketData));
  }, []);

import React, { createContext, useContext, useReducer } from "react";

export const StateContext = createContext();

export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);