Trouble Passing Fetch Response in Effect Runtime

export async function loader(request: LoaderFunctionArgs) {
  const site = Effect.gen(function* ($) {
    const api = yield* $(SiteService);
    return yield* $(
      api.getById({ id: Number(request.params.id), lastEnergy: true, weather: true }),
      Effect.catchTags({
        HttpNotFoundError: (err) =>
          Effect.fail(new Response(err.message, { status: err.statusCode })),
      }),
    );
  }).pipe(AppRuntime.runPromise);

  return defer({ site });

import { useEffect } from "react";
import { isRouteErrorResponse, useRouteError } from "react-router-dom";

export function NotFound() {
  const error = useRouteError();

  useEffect(() => {
    if (error) {
      console.log(isRouteErrorResponse(error));
      console.log(error);
    }
  }, [error]);

  return <div>NotFound</div>;
}

export default NotFound;