How to use the react-suspense-fetch.prepare function in react-suspense-fetch

import React, { Suspense } from 'react';

import { prepare } from 'react-suspense-fetch';

import Item from './Item';

export const fetchFunc = async (userId: string) => (await fetch(`https://reqres.in/api/users/${userId}?delay=3`)).json();

const items = [
  { id: '1', result: prepare(fetchFunc) },
  { id: '2', result: prepare(fetchFunc) },
  { id: '3', result: prepare(fetchFunc) },
];

const App: React.FC = () => (
  Loading...}>
    {items.map(({ id, result }) => (
      <div>
        
        <hr>
      </div>
    ))}
  
);

export default App;

import { AuthContext } from './App';

const fetchUserDataFunc = async (token: string) => {
  const res = await fetch('https://reqres.in/api/items?delay=2', {
    headers: {
      Token: token,
    },
  });
  const data = await res.json();
  return data as { data: { id: number; name: string }[] };
};

const extractToken = (authState: { token: string }) => authState.token;

const UserItems = prepare(fetchUserDataFunc, extractToken);

const UserData: React.FC = () => {
  const [authState] = useContext(AuthContext);
  if (!authState) throw new Error('no authState');
  run(UserItems, authState);
  return (
    <ul>
      {UserItems.data.map((item) =&gt; (
        <li>{item.name}</li>
      ))}
    </ul>
  );
};

export default UserData;