I'm trying to maintain state values between routes in context. But it gets reset when the route changes.

aackage.json:

 "react-router-dom": "^6.8.0",
 "react-dom": "^18.2.0",
 "react": "^18.2.0",

App.js:

export default const App = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);

  const getData = async () => {
    setLoading(true);
    const data = await axios.get("url", {
      withCredentials: true,
    });
    setData(data);
    setLoading(false);
  };

   useEffect(() => {
    getData()
    console.log("I run on route change");
  }, []);
  

  const GlobalContextValue= {
    data: data,
    loading: loading,
  };



   return (
    <>
      <GlobalContextProvider value={GlobalContextValue}>
      <BrowserRouter>
        <Routes>
          <Route index element={<HomePage />} />
          <Route path="/:slug" element={<PostPage />} />
          {/* <Route path="*" element={<NoPage />} /> */}
        </Routes>
      </BrowserRouter>
      </<GlobalContextProvider />
    </>
  )

}

Whenever I try to access any route the getData function inside the useEffect calls which inturns resets the data. I have attached a