Why React PWA refetch lazy load chunks based on routes when offline

I am trying to do PWA with CRA and SWR for data fetching, so I did

serviceWorker.register();

then created minifist.json file.

and I did lazy loaded some components based on the routes. so When I tried to test the offline flow on the browser by changing the url through Reach Router Link while opening the network tab, cause the app to re-fetch the component's chunk which failed - cuz offline status -, therefore causing the Error Boundary to trigger an error.

hint : I did visit the page, before becoming offline so the chunk should have been fetched.

secondly, how could I add a custom offline page with CRA and PWA?

Update: Here's the code for handling the error cases.

export const dev = axios.create({ ...config.dev });
// useSWR fetcher function.
export const fetcher = (url: string) =>
  dev
    .get(url)
    .then((res) => res.data.data)
    .catch(
      (err) => err?.response?.data?.message || err.message || err?.data?.message
    );

axiosRetry(dev, {
  retries: 3,
  retryDelay: (retryCount) => {
    return retryCount * 1500;
  },
});

I did add the fetcher function globally at the top level

   <SWRConfig
        value={{
          fetcher,
        }}
      >
    ...
  </SWRConfig>

and within the component that using useSWR,

 const { data: actions, error }: any = useSWR(url);

  if (error)
    return (
      <h3 className="title">
        Opps, {error} please try again later
      </h3>
    );