I created a HOC or Container component from where I am fetching data and sending to child component .I am also using react-router-dom library for routing .

I am using HOC component like this

<BrowserRouter>
    <Routes>
      <Route path={'/'} element={<HOC Component={App} />} />
    </Routes>
  </BrowserRouter>

I am sending data to child component like this

export const HOC = ({ Component }) => {
  const fetchData = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const data = {
          message:
            'Data fetched successfully' + Math.floor(Math.random() * 100),
        };
        return resolve(data);
      }, 2000); // Simulating a delay of 2 seconds
    });
  };
  return (
    <div>
      <If condition={fetchData()}>
        <Fallback>Loading data ...</Fallback>
        <Then>
          {(data) => (
            <>
              <span>parent component your data:{JSON.stringify(data)}</span>
              <Component data={data} />
            </>
          )}
        </Then>
        <Else>{(error) => <span>Failed to load data because </span>}</Else>
      </If>
    </div>
  );
};

Now issue is that there is an CTA in my child component, on click of that I want to fetch again data, is there any way using react-router-dom ??. I want to re-render HOC so that it fetch again and send new data to child component

here is my code
https://stackblitz.com/edit/vitejs-vite-gtdrmg?file=src%2FApp.tsx,src%2Findex.css,src%2Fmain.tsx,src%2Fhoc.tsx,src%2FApp.css&terminal=dev
on way I am think to pass fetchData to child component and do the manipulation but I don’t think parent component have correct data ..