Next JS 13 Error page doesn’t handle fetch api error?

As what I understand based on docs of next js with app router, I create a error.tsx page inside my app folder (app/[lang]/error.tsx) — the file consist the code that are shown in docs. also I have some api calls (fetch) inside a file in this route: src/api/categories/index.ts (because I want these apis call in server (SSG)) but if my api doesn’t resolve it shows me default error of next js like below:
enter image description here

but I don’t want this I need to show an error page for that. here is also my error page code:

"use client";

export default function Error({
 error,
 reset,
}: {
 error: Error;
 reset: () => void;
}) {
 console.log(error);
 return (
   <div>
     <h2>Something went wrong!</h2>
     <button onClick={() => reset()}>Try again</button>
   </div>
 );
}

I also tried to copy this file next to the index.ts (apis file) because as the docs says :

Next.js will forward the resulting Error object to the nearest
error.js file as the error prop

but dosn’t work. how can I do that?