React Virtuoso Load More Button

Question

I am reading the react virtuoso documentation and it has the following example.

When replicating it in, I get the error that this generateUsers function is not defined.

Its my first time using virtuoso so I am a bit lost with the docu.

Any hint is super welcome

Thanks

import { Virtuoso } from 'react-virtuoso'
import {useState, useEffect, useCallback} from 'react'


const App=()=> {
    const [users, setUsers] = useState(() => [])
    const [loading, setLoading] = useState(false)

  
    const loadMore = useCallback(() => {
      setLoading(true)
      return setTimeout(() => {
        setUsers((users) =>  ([...users, ...generateUsers(100, users.length)]) )
        setLoading(() => false)
      }, 500)
    }, [setUsers, setLoading])
  
    useEffect(() => {
      const timeout = loadMore()
      return () => clearTimeout(timeout)
    }, [])
  
    return (
      <Virtuoso
        style={{height: 300}}
        data={users}
        itemContent={(index, user) => { return (<div style={{ backgroundColor: user.bgColor }}>{user.name}</div>) }}
        components={{
          Footer: () => {
            return (
              <div
                style={{
                  padding: '2rem',
                  display: 'flex',
                  justifyContent: 'center',
                }}
              >
                <button disabled={loading} onClick={loadMore}>
                  {loading ? 'Loading...' : 'Press to load more'}
                </button>
              </div>
            )
          }
        }}
      />
    )
  }


export default App