Using the new react use api how can I re-fetch with an onClick event?

Before with useEffect is was really easy cause the fetch function was called from useEffect or the onclick event

import { use, Suspense } from 'react'

const fetchData = async () => {
  const res = await fetch('https://api.chucknorris.io/jokes/random')
  return res.json()
}

const JokeItem = () => {
  const joke = use(fetchData())
  return <h2>{joke.value}</h2>
}

export default function Joke() {
 
  return (
    <Suspense>
      <JokeItem /> 
      <button onClick={() => {}}>New Joke</button>
    </Suspense>
  ) 
 
}