How to use the react-async.createInstance function in react-async

IfPending,
  IfRejected,
  IfFulfilled,
  PromiseFn,
} from "react-async"
import DevTools from "react-async-devtools"
import "./App.css"
import { FetchHookExample } from "./FetchHookExample"

const loadFirstName: PromiseFn = ({ userId }) =>
  fetch(`https://reqres.in/api/users/${userId}`)
    .then(res => (res.ok ? Promise.resolve(res) : Promise.reject(res)))
    .then(res => res.json())
    .then(({ data }) => data.first_name)

const CustomAsync = createInstance({ promiseFn: loadFirstName })

const UseAsync = () => {
  const state = useAsync({ promiseFn: loadFirstName, userId: 1 })
  return (
    <>
      Loading...
      {error => `Something went wrong: ${error.message}`}
      
        {data => (
          <div>
            <strong>Loaded some data:</strong>
            <pre>{JSON.stringify(data, null, 2)}</pre>
          </div>
        )}

import React from "react"
import { createInstance } from "react-async"
import DevTools from "react-async-devtools"
import ReactDOM from "react-dom"
import "./index.css"

const loadUser = ({ userId }) =>
  fetch(`https://reqres.in/api/users/${userId}`)
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())

const AsyncUser = createInstance({ promiseFn: loadUser }, "AsyncUser")

const UserPlaceholder = () => (
  <div>
    <div>
    <div>══════</div>
  </div>
)

const UserDetails = ({ data }) =&gt; (
  <div>
    <img alt="" src="{data.data.avatar}">
    <div>
      {data.data.first_name} {data.data.last_name}
    </div>
  </div>
)</div>