React 19’s use hook is running in an endless loop but should only run once [duplicate]

I am using react 19’s use function, but the problem that I am running into is that it seems to be called in an endless loop, and I am not sure why or what I am doing wrong.

I created an async function that makes an http request to my graphql server. The response returns a 200 with the correct data, but then the console.log never executes, and the fetch gets called endlessly making lots of http requests.

Stackblitz Example (See console for output).

// The http request
export const getDistance = async (start, end) => {
  const res = await fetch(environment.hasura.v2.url, {
    method: 'POST',
    headers: { /* API Headers */ },
    body: JSON.stringify({ query: /* Graphql query */, variables: { start, end } }),
  });
  const json = await res.json();
  return json.data;
};

// The header to display
export default function UserHeader() {
  const distance = use(getDistance(1, 20));
  console.log('distance', distance);

  return <>{distance}</>;
}

// The page root
export default function App() {
  return (
    <Suspense fallback={<>Loading...</>}>
      <UserHeader />
    </Suspense>
  );
}

I thought that this was because of re-rendering but if I remove the use function the console.log only displays twice (due to strict mode):

export default function UserHeader() {
  console.log('distance');
}

What is causing this endless call?