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:

Requisition return:

API: https://disneyapi.dev/docs