I'm trying to render multiple cards by pulling data from the API. But the return is an array, I don't understand why the map is not working.

  
const CharacterCard = () => {

  const [showModal, setShowModal] = useState(false)

  const openModal = () => {
    setShowModal(prev => !prev)
}

  const characters = useRequestData([], `${BASE_URL}/characters`)

  
  const renderCard = characters.map((character) => {
    return (
      <CardContainer key={character._id} imageUrl={character.imageUrl}/>
    )
  })

  return (
    <Container>
      {renderCard}
     <ModalScreen showModal={showModal} setShowModal={setShowModal} />
    </Container>
  )
}

export default CharacterCard

The hook is this

 import { useEffect, useState } from "react"
import axios from "axios"

const useRequestData = (initialState, url) => {
    const [data, setData] = useState(initialState)

    useEffect(() => {
        axios.get(url)

        .then((res) => {
            setData(res.data)
        })
    
        .catch((err) => {
            console.log(err.data)
        })
    }, [url])

    return (data)
}

export default useRequestData

console error image

requisition return image

API: https://disneyapi.dev/docs