I get the error "Uncaught TypeError: DroppedItem.map is not a function ReactJS" when trying to show a floating window on my page after opening a case. I think it has something to do with renders (https://jsramblings.com/are-you-logging-the-state-immediately-after-updating-it-heres-why-that-doesnt-work/) but I got no idea how to fix it. Please help. I use Axios to load arrays from my backend server. The "className" is from TailWind.

import {useEffect, useState, useContext} from "react"
import {useLocation} from 'react-router-dom'
import Axios from "axios";
import { AppContext } from "/src/App";

export default function CaseDetail(){

    const [ContentList, setContentList] = useState([])
    const [Case, setCase] = useState([])
    const [ShowDrop, setShowDrop] = useState(false)
    const [DroppedItem, setDroppedItem] = useState([])

    const { token } = useContext(AppContext);
    const { setToken } = useContext(AppContext);
    const { userID } = useContext(AppContext);

    const DroppedItemFunc = (array) => {
      setDroppedItem(array)
    }

    const DropWindow = () => {
      setShowDrop(!ShowDrop)
    }

    const MilSpecList = ContentList.filter(function(driver){
      return driver.RarityName === "Mil-Spec"
  })
    
    const openCase = (CasePrice) => {
      const Price = parseInt(CasePrice)
      if (token >= Price){
        setToken(token-Price)
        const randomNumero = Math.random()* 100;
        if(randomNumero <= 70)
        {
          const millength = MilSpecList.length
          const randomItemM = Math.floor(Math.random() * (millength - 0)  0)
          console.log(MilSpecList[randomItemM].SkinName)
          console.log(MilSpecList[randomItemM].IDItem)
          submitItem(MilSpecList[randomItemM].IDItem)

          setDroppedItem(MilSpecList[randomItemM])
          setShowDrop(!ShowDrop)
        }
      }else{console.log("No funds")}
    }

    return(
          <div className="flex justify-center align-bottom">
            {ShowDrop && <div className=" absolute">
              {DroppedItem.map(item => (
                  <div className=" border-2 border-slate-500 w-[25rem] h-[30rem] p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 ">
                
                  <button
                    className=' border-2 border-green-700 bg-green-400 hover:bg-green-600 text-green-900 hover:text-rose-50 w-[100%] h-10 rounded-cool ' 
                    onClick={()=>{DropWindow()}}
                  >
                    Close
                  </button>
                </div>
              ))}
            </div>
            }
                <div className="bg-slate-800 rounded-cool text-white divide-y-2 w-3/5 p-3">
                {Case.map(item => (
                  <h1 key={item.CaseName} className="text-4xl font-bold text-slate-200 py-2" >
                    {item.CaseName}