array.map not a function

When using array map method, the browser page is blank and in the console I receive an error:

array.map not a function

Although when I comment array.map before rendering the page and after page gets renderd I uncomment it and it works fine.

const movieDesc = useSelector((state) => state.movieDesc);
const [allVideo, setallVideo] = useState("");
const getAllVido = async () => {
try {
  const res = await axios.get(
    `https://api.themoviedb.org/3/${movieDesc.desc.media_type}/${movieDesc.desc.id}/videos?api_key=${process.env.REACT_APP_API_KEY}`
  );
  console.log(res.data);
  setallVideo(res.data.results);
} catch {
  console.log(Error);
}
};
useEffect(() => {
  getAllVido();
}, []);

JSX code:

<p className="movieDesc__trailer">All Video</p>
  {allVideo?.map((video) => (
    <>
      <p key={video.id}>{video.name}</p>
      <iframe
        key={video.id}
        className="movieDesc__trailerVideo"
        src={`https://www.youtube.com/embed/${video.key}`}
        title={video.name}
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </>
  ))}

  <p className="movieDesc__wrap">Wrapping Up</p>