React Virtuoso Load More Button - reactjs

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