State video cannot use the map function in React

I am currently trying to build a movie app using React. In this case, I tried to display a video from YouTube with the TMDB API. But an error occurred when trying to access the key. How can I fix it?

import React, { useEffect, useState } from 'react'import { useDispatch, useSelector } from 'react-redux'import {useParams} from 'react-router-dom'import { fetchMovie } from '../../../manage/action'import style from './style.module.css'import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'import {faStar} from '@fortawesome/free-solid-svg-icons'import Youtube from 'react-youtube'import { movieList } from '../../../service/api/api'function ContentComing() {    const {id} = useParams()    const dispatch = useDispatch()    // state    const [video, setVideo] =useState([])    const {coming} = useSelector((state) => state.upComing)    const fetchMovieUpComing = async(comingId) => {        await dispatch(fetchMovie(comingId))    }   // Data API key for YouTube    const fetchVideo = async(movieId) => {        try {            const respone = await movieList.get(`/movie/${movieId}/videos?api_key=${import.meta.env.VITE_TMDB_KEY}&append_to_response=videos`)            return respone.data.results[1]        } catch (error) {            return error        }    }    useEffect(() => {        fetchMovieUpComing(id)        // Render API function to state        setVideo(fetchVideo(id))        console.log(fetchVideo(id))    },[])    return (<><div className={style['wrapper']}><div className={style['detail-movie']}><div className={style['image-movie']}><img src={`${import.meta.env.VITE_IMG_PATH}${coming.poster_path}`} alt='poster' /></div><div className={style['content-movie']}><p className={style.title}>Title: {coming.title}</p><div className={style['rating']}><FontAwesomeIcon icon={faStar} className={style['icon']} size='2x'/>                            {coming.vote_average}</div><p>Release Date: {coming.release_date}</p><hr /><div className={style['genre']}><p>Genre:</p>                            {coming.genres.map((item) => {                                return (<p key={item.id}>{item.name}</p>                                )                            })}</div><p>Language: {coming.original_language}</p><p>Overview: {coming.overview}</p><p>Popularity: {coming.popularity}</p></div></div><div className={style['video-movie']}>                    {/* state video */}                    {video.map((item) => {                        return (<Youtube videoId={item.key}/>                        )                    })}</div></div></>    )}export default ContentComing

The data result of the fetchVideo function is an array, so the useState uses [].

Error