I am new to react and I am building a component thats going to be displayed within the profile page for a specific type of user of the app that I am working on "podcaster". I am trying to display their podcasts in a responsive list but I keep getting this typeError. I have looked at different examples here on SO but I have not been able to find the problem. I am using 2 hooks to get this info [useState & useEffect] yet I am not able to fully understand why I am getting this error.

import { FC, useState, useEffect, Fragment } from 'react'
import ResponsiveList from '../ResponsiveList'

const UserProfilePodcaster: FC = () => {
const {
  user: { id, accountType },
    } = useAuth()
const [podcasts, setPodcasts] = useState<any[]>([])
const [showModal, setShowModal] = useState(false)
const [currentPodcast, setCurrentPodcast] = useState<any>({})
const [isLoading, setIsLoading] = useState(true)
const [categories, setCategories] = useState<{ name: string; code: string }[]>([])

 useEffect(() => {
;(async function () {
  const categories = await getCategories()
  const podcasts = await getPodcast(id)

  setCategories(categories)
  setPodcasts(podcasts)
  setIsLoading(false)
  })()
  }, [id])

  <ResponsiveList
      data={podcasts.map((podcast: any) =>
        podcast.name({
          ...podcast,
          edit: (
            <Button
              variant="contained"
              color="primary"
              fullWidth
              onClick={() => handleEditPodcast(podcast)}
            >
              Edit
            </Button>
          ),
        })
      )}
      keys={[
        { key: 'podcasts', label: 'Podcast Name' },
        { key: 'categories', label: 'Podcast Categories' },
        { key: 'description', label: 'Podcast Niche' },
        { key: 'Reach', label: 'Podcast Reach' },
        {
          key: 'edit',
          label: 'Edit',
        },
      ]}
      emptyMessage="It seems that you have not created a podcast yet, go out and start one