To begin with I have 2 files HistoryContext.jsx

import { createContext, useState } from "react";

export const HistoryContext = createContext();

export const HistoryContextProvider = ({ children }) => {
  const [history, setHistory] = useState([]);

  return (
    <HistoryContext.Provider value={{ history, setHistory }}>
      {children}
    </HistoryContext.Provider>
  );
};

and Table.jsx which has this function

const handleClick = async (item) => {
    await setHistory((prevHistory) => [
      ...prevHistory,
      { id: item.geoname_id, name: item.name, coordinates: item.coordinates },
    ]);
    navigate("/weather", {
      state: { ...item.coordinates, name: item.name },
    });
  };

Now when this function is called it stores the values in the history and then navigates to /weather but if I return back then it removes all the history. How can I store my history details? Please help and thanks in advance.

I have already tried using a home button which uses navigate('/') in /weather yet it does not stores the history.