How to get Json data from a fetch response object (using react router loader with defer)

const responce = fetch(FetchUrl.toString());
  console.log("in loader", responce);
  return defer({ responce });

const responce = fetch(FetchUrl.toString());
  console.log("in loader", responce);
  return defer({ responce });

function HomePage() {
  const responceData = useLoaderData();

  return (
    <div className={HomeStyles.Container}>
      <FindJob />
      <Suspense fallback={<h2>Loading...</h2>}>
        <Await resolve={responceData.responce}>
          {async (responce) => {
            const data = await responce.json();
            return data.updatedJobs.map((item, key) => {
              return <JobCard key={key} data={item} />;
            });
          }}
        </Await>
      </Suspense>
    </div>
  );
}

function HomePage() {
  const responceData = useLoaderData();

  return (
    <div className={HomeStyles.Container}>
      <FindJob />
      <Suspense fallback={<h2>Loading...</h2>}>
        <Await resolve={responceData.responce}>
          {async (responce) => {
            const data = await responce.json();
            return data.updatedJobs.map((item, key) => {
              return <JobCard key={key} data={item} />;
            });
          }}
        </Await>
      </Suspense>
    </div>
  );
}