Hello I am using the Disney API using React, I am trying to figure out how to make a random characters image and name appear. The following code I can make one characters image and name appear which is great but I want it to grab a random character and make there name and image appear. The last two lines inside the [] the 0 represents the first character in the API Data if I change it to 1 it will display the second characters info in the API Data. For example disneyData[0].name returns the character name 'Olu Mel' if I change the 0 to a 1 it will return the character name "GIFfany". I have also attached a image of how the Disney API Data returns, just learning API and just struggling to read it and return its data. Hope my explanation is easy to understand. Thanks for you help.

Disney API returns character data like this

import request from 'superagent'
// import { fetchDisney } from '../apiClient'

function App () {
  // const [data, setData] = useState(null)
  const [disneyData, setDisneyData] = useState(null)
  const [loading, setLoading] = useState(true)

  console.table(disneyData?.data)

  useEffect(() => {
    // console.log('useEffect')
    request.get('https://api.disneyapi.dev/characters')
      .then(response => {
        setDisneyData(response.body.data)
        console.log(response.body.data)
        setLoading(false)
        return null
      })
      .catch(err => (
        console.log(err)
      ))
  }, [])
  // if its loading then display 'loading content' else display
  if (loading) return 'loading content'
  return (
    <>
      <h1>Experimenting on Disney Characters</h1>
      <h2>{disneyData[0].name}</h2>
      <img src={disneyData[0].imageUrl} alt="" />

    </>
  )
}

export default App