Nested arrays fetch issues react

I’m trying to fetch something from an API using React for my front end however the JSON data has some nested arrays in the main object and fetching them has been a trouble, I know there’s loads of sources regarding this but trust me I’ve been trying for 2 days now and I’ve watched loads of videos.. At this point I’m even doubting the API but its working as I just tested it.

import { isContentEditable } from '@testing-library/user-event/dist/utils';
import React, { useState, useEffect } from 'react'
export default function Posts() {
  const [post, getPost] = useState([])
  const API = '#';
  const fetchPost = () => {
    fetch(API)
      .then((res) => res.json())
      .then((res) => {
        console.log(res)
        getPost(res)
      })
  }
  useEffect(() => {
    fetchPost()
  }, [])
  return (
    <>
      <h2>Past Games</h2>
    
        {post.map((item) => 
          
        <div>{item.name}
        
        <ul>
        {item.winner.map((sub) => 
        <li>{sub.name}</li>
        )}
        </ul>
        </div>


        

        )}
  
    </>
  )
}

The error I get is –

   Uncaught (in promise) TypeError: item.winner.map is not a function