리액트 key관련 질문드립니다

[붕어3]

안녕하세요. 수강한지 1년다되갈쯤해서 도저히 해결안되는 질문하나 드리려고합니다.

key사용법은 대충 알았는데 몇일을 검색해봐도 처리방법을 모르겠습니다.
작동은 되지만 오류가 계속납니다. 아무래도 map함수 중첩되어 그런것같습니다.

30라인의 Item함수 (api에서 불러온 \n을 <br>로 바꿔주는 함수)에서 발생하는것으로 보입니다..
<div key={data.id}>라고 쓴 부분의 키 위치가 적절한지도 모르겠습니다..

오류내용:
-------------------------------------------------------------------------------------------
Uncaught Error: Syntax error, unrecognized expression: #[object HTMLDivElement] td.mceToolbar > a
    at ea.error (jquery.js?ver=1.12.4-wp:2:12681)
    at ea.tokenize (jquery.js?ver=1.12.4-wp:2:18717)
    at ea.select (jquery.js?ver=1.12.4-wp:2:21525)
    at Function.ea (jquery.js?ver=1.12.4-wp:2:7333)
    at a.find (jquery-migrate.min.js?ver=1.4.1:2:3686)
    at n.fn.init.find (jquery.js?ver=1.12.4-wp:2:24030)
    at a.fn.find (jquery-migrate.min.js?ver=1.4.1:2:8931)
    at n.fn.init (jquery.js?ver=1.12.4-wp:2:24596)
    at new a.fn.init (jquery-migrate.min.js?ver=1.4.1:2:3137)
    at n (jquery.js?ver=1.12.4-wp:2:406)


소스코드:
--------------------------------------------------------------------------------------------------

//디테일 컨테이너
import { useSelector } from "react-redux";

const JobList = () => {

    const DetailDataMap = useSelector((state) => state.DetailData );

    const seeDetailCard = (id, e) => {
        document.getElementById(id).classList.toggle("hide"); 
    }

    const addColorOnCard = (id, e) => {
        document.getElementById(id).parentElement.classList.add("addColorOnCard"); 
    }
    const removeColorOnCard = (id, e) => {
        document.getElementById(id).parentElement.classList.remove("addColorOnCard"); 
    }

    const removeCard = (e) => {
        e.stopPropagation()

        //지우기 구현하기
    }
   

    const Item = ({ text }) => {
        return <p>
          {text.split("\n").map((txt, i) => (
              <>
                {txt}
                <br/>
              </>
            ))}
        </p>;
    };

    return (
        <div>
            <div className="detail">

{/* 차후 이 링크를 보고 부드러운 여닫기 제작한다: https://www.musinsa.com/app/goods/2843986?loc=goods_rank */}
{/* https://www.impressivewebs.com/animate-display-block-none/ */}
            {/* 반복시작 - 닫은디테일 */}
            {/* onClick={seeDetailCard(data.id)} */}
            {DetailDataMap.data.map((data, i) => (  // 맵함수를 이용해 dummy 안의 days 그룹 내의 원소를 검색한다.
            <div key={data.id}>

                <div className="card__case"
                onClick={(e)=>{seeDetailCard(data.id, e)}}
                onMouseOver={(e)=>{addColorOnCard(data.id, e)}}
                onMouseOut={(e)=>{removeColorOnCard(data.id, e)}}
                >
                    
                    <div className="card__thumb">   
                        
                    </div>
                    <div className="card__texts">
                        <div className="card__posision">
                            {data.position}
                        </div>
                        <div className="card__small__area">
                            <div className="card__small__company">
                                {data.company}
                            </div>
                            <div className="card__small__delete btn"
                                onClick={(e) => removeCard(e)}>
                                목록에서 삭제
                            </div>
                        </div>
                    </div>
                </div>

                {/* 열린디테일~ */}
                <div className="card__case2 hide" id={data.id}>
                    <div className="card__case2__3door">
                        <div>상태: {data.status}</div>
                        <div>게시물ID: {data.id}</div>
                        <div>마감일:{data.dueTime}</div>
                    </div>
                    <div>
                        <span className="card2__desc__subj">주소</span>
                        <hr></hr>
                        <div className="card2__desc__detail">{data.address}</div>
                    </div>
                    <div>
                        <span className="card2__desc__subj">회사소개</span>
                        <hr></hr>
                        <div className="card2__desc__detail"><Item text={data.detailIntro} /></div>
                    </div>
                    <div>
                        <span className="card2__desc__subj">주요업무</span>
                        <hr></hr>
                        <div className="card2__desc__detail"><Item text={data.detailMain_tasks} /></div>
                    </div>
                    <div>
                        <span className="card2__desc__subj">자격요건</span>
                        <hr></hr>
                        <div className="card2__desc__detail"><Item text={data.detailRequirements} /></div>
                    </div>
                    <div>
                        <span className="card2__desc__subj">우대사항</span>
                        <hr></hr>
                        <div className="card2__desc__detail"><Item text={data.detailPreferred_points} /></div>
                    </div>
                    <div>
                        <span className="card2__desc__subj">혜택 및 복지</span>
                        <hr></hr>
                        <div className="card2__desc__detail"><Item text={data.detailBenefits} /></div>
                    </div>
                    
                </div>
                {/* ~열린디테일 */}
                {/* DetailDataMap.data[0]  */}

            </div>
            ))}

            </div>
            <div className="detail__pagenation">
                페이지네이션자리
            </div>
        </div>
    );
}

export default JobList;

[codingapple]

jquery 셀렉터가 이상하다는소리같은데 $() 이런거 쓰는곳 있나 확인합시다

[붕어3]

잉ㅠㅠ 오류내용이 이상하게올라갔습니다....
아래처럼 뜹니다....

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Item`. See https://reactjs.org/link/warning-keys for more information.
    at Item (http://localhost:3003/static/js/bundle.js:1382:7)
    at div
    at div
    at div
    at div
    at div
    at div
    at JobList (http://localhost:3003/static/js/bundle.js:1358:81)
    at div
    at App
    at Provider (http://localhost:3003/static/js/bundle.js:38802:5)

[codingapple]

 {text.split("\n").map((txt, i) => (
이런거 map 쓸 때도 key 속성을 넣읍시다 

[글쓴이]

글