안녕하세요.ㅠㅠ 너무 어려워서 질문 드립니다.

현재 포트폴리오용 웹사이트를 제작중입니다.

아래에서 구인, 기술스택, 연차를 선택한 후 추가하기 버튼을 누르면 그 밑에 네모난 칸에 하나씩 쌓이는 기능을 만들고있습니다.

그런데 구인, 연차 부분은 괜찮은데 기술스택부분을 변경하면 이전에 작성된 칸까지 변경이 되어버립니다.

알려주세요 선생님..

 //부모 컴포넌트
import { Input, Radio, Select } from 'antd';
import React, { useEffect, useState } from 'react'
import PeopleList from './PeopleList';


function Peopleneed({}) {


    const [isChecked, setIsChecked] = useState(false)
    // const [checkedItems, setCheckedItems] = useState(new Set())
const [checkedItems, setCheckedItems] = useState(new Set())
    const [test, setTest] = useState([])
    const [result, setResult] = useState(
    [
        {
            position : 'front',
            skill : 'nodeJs',
            years : '3'
        },
        {
            position : 'front',
            skill : 'nodeJs',
            years : '3'
        },
    ]
    ) //기존 데이터 


    const [details, setDetails] = useState({
        position: '',
        skill: '',
        years: ''
    })


    const skillData = [
        {id: 1, name: "React"},
        {id: 2, name: "Node"},
        {id: 3, name: "php"},
        {id: 4, name: "fourth"},
        {id: 5, name: "fifth"},
        {id: 6, name: "sixth"},
        {id: 7, name: "seventh"},
        {id: 8, name: "eighth"},
    ];


    const position = [
        {id: 1, name: "프론트앤드개발자"},
        {id: 2, name: "백앤드개발자"},
    ] 


    const years = [
        {id: 1, name: "취준생"},
        {id: 2, name: "1년미만"},
        {id: 3, name: "2년미만"},
        {id: 4, name: "3년미만"},
        {id: 5, name: "5년미만"},
        {id: 6, name: "5년이상"},
    ] 


    const checkHandler = ({target}) => {
        setIsChecked(!isChecked);
        checkedItemHandler(target.value, target.checked)
        // console.log(target.value, target.checked) seventh, true이렇게 나옴. 
    }
    const checkedItemHandler = (Id,isChecked) => {
        if(isChecked){
            checkedItems.add(Id);
            console.log(checkedItems)
            setCheckedItems(checkedItems);
        }else if(!isChecked && checkedItems.has(Id)){
            checkedItems.delete(Id);
            setCheckedItems(checkedItems);
        }
        console.log('체크능',checkedItems)
        setDetails((prev) => {
            return {...prev, skill :checkedItems}
        })
        // setResult(details)
        return checkedItems;
    };
    const handleChange = (e) => {
        const name = e.target.name;
        const value = e.target.value;


        setDetails((prev) => {
            return {...prev, [name]:value}
        })
    }


    //제출버튼
    const onSubmitHandler = (event) => {
    event.preventDefault();
    console.log('details',details)
    // setTest({result}.concat(details))
    // console.log('여기는',test)
    setResult([...result, details])
    }
      
  return (
    <>
    <form>
        <div style={{border: '1px solid red', padding:'20px'}}>
            <span style={{marginLeft:'10px', fontWeight: 'bold'}}>구인</span>
            <div >
            {position.map((row,idx)=>
                <>
                    <input type="radio" name="position" value={row.name}
                    onChange={handleChange}
                    />
                    <span>{row.name}</span>
                </>
            )}
            </div>
            <span style={{marginLeft:'10px', fontWeight: 'bold'}}>기술스택</span>
                {skillData.map((item)=>
                    <label key={item.id}>
                        <input type="checkbox" name="skill" value={item.name} onChange={(e)=>checkHandler(e)} />
                        <span style={{paddingLeft:'5px'}}>{item.name}</span>
                    </label>
                )}
            <br />
            <span style={{marginLeft:'10px', fontWeight: 'bold'}}>연차</span>
                {years.map((row,idx)=>
                    <>
                        <input type="radio" name="years" value={row.name} 
                        onChange={handleChange}
                        />
                        <span>{row.name}</span>
                    </>
                )}            
            <br />
            <input type="submit" value="추가하기" onClick={onSubmitHandler}/>
        </div>
    </form>
    <PeopleList result={result}/>
    </>
  )
}


export default Peopleneed

//자식컴포넌트

//자식컴포넌트
import React from 'react'


function PeopleList({result}) {
    console.log(result)
  return (
    <>
    {result.map((step)=>(
        <>
        <div style={{border : '1px solid red', marginBottom:'5px'}}>
            <div>{step.position}</div>
            <div>{step.skill}</div>
            <div>{step.years}</div>
        </div>
        </>
    ))}
    </>
  )
}


export default PeopleList