تغییر state ها در react

سلام دوستان خسته نباشید
من این استیت رو مپ کردم :

    const [Data , setData] = useState([
        {name : 'بزرگسال (12 سال به بالا)' , number : 1 , key : 1} ,
        {name : 'کودک (2 تا 12 سال)' , number : 0 , key : 2} ,
        {name : 'نوزاد' , number : 0 , key : 3}
    ])

html ای که قراره خروجی باشه :

 <Option key={item.key}>
                        <div>{item.name}</div>
                        <ChangeNumCon>
                            <ControlPointIcon  onClick={()=>AdultPlus(item)} />
                            <Num>{item.number}</Num>
                            <RemoveCircleOutlineIcon />
                        </ChangeNumCon>
</Option>

همانطور که می بینید یه تابع هم هست که با کلیک رو این تابع باید number اون دیتا تغییر کنه.من تابع رو به شکل زیر نوشتم:

    const AdultPlus = (thisitem)=>{
            let newitem = {...thisitem , number : thisitem.number + 1}
            let remItem = Data.filter(item => item.key !== thisitem.key)
            setData([...remItem , newitem])
    }

عمل هم می کنه.اما مشکل اینجاست که هر بار المنتی که بهش اضافه میشه به اخر لیست میره در نتیجه ترتیب لیست دائم در حال عوض شدنه.
باید چجوری کار بکنم که این اتفاق نیفته؟؟؟(شرمنده یکم طولانی شد)