Uncaught TypeError: DroppedItem.map is not a function ReactJS

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} 💼
                  </h1>
                  ))}
                  {Case.map(item => (
                  <div key={item.CaseName} className="flex justify-center p-3 mt-2">
                    
                    <div className=" w-[50%] p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 " 
                    >
                      <div className="flex justify-center">
                        <img className="" src={`src/images/${item.CaseImage}`}/>
                      </div>
                      <h1 className="hover:text-orange-300">
                        {item.CaseName}
                      </h1>
                        <h1 className="hover:text-orange-300 basis-1/2">
                          {item.CasePrice} Tokens
                        </h1>
                        <div className=" flex justify-center">
                          <button className=" cursor-pointer text-xl text-slate-900 w-40 h-10 hover:text-orange-300 hover:bg-slate-600 hover:border-2 hover:border-white-200 bg-orange-300 rounded-cool px-2 py-0.25 transition-all"
                          onClick={() => {openCase(item.CasePrice)}}
                          >
                            OPEN
                          </button>
                        </div>
                    </div>
                  </div>
                  ))}
              </div>
              </div>
    )
}

>Solution :

your error is here: setDroppedItem(MilSpecList[randomItemM]) – you cannot modify the data type of your state from an array, to some other value, as the method ‘map’ no longer becomes available. Try to make sure you do not modify data structures, I find that prop-types (when in reactJS), typescript (when in reactTS), and eslint (in general) help me a lot to make sure I don’t accidentally mutate my structure type on accident. Try also console logging the value and type of MilSpecList[randomItemM] to confirm the type is indeed an array, as well as anywhere you might be running setDroppedItem