react-beatiful-dnd에서 문제가 발생합니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

기능상에 문제가 있는건 아니지만, 계속해서 아래의 에러가 발생합니다.

사용하고 있는 버전의 문제일까요?

{
  "name": "react-todo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "10.4.0",
    "@testing-library/jest-dom": "6.6.3",
    "@testing-library/react": "16.2.0",
    "@testing-library/user-event": "13.5.0",
    "react": "^19.0.0",
    "react-beautiful-dnd": "13.1.1",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "10.4.20",
    "postcss": "8.5.3",
    "tailwindcss": "3.4.17"
  }
}

Lists.js

import React from 'react';
import List from './List.js'
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';

const Lists = React.memo(({todoData, setTodoData}) => {
  // console.log('Lists Component')
  const handleEnd = (result) => {
    if(!result.destination) return;
    const newTodoData = Array.from(todoData);
    const [reorderedItem] = newTodoData.splice(result.source.index, 1);
    newTodoData.splice(result.destination.index, 0, reorderedItem);
    setTodoData(newTodoData);
  }

  return <div>
    <DragDropContext onDragEnd={handleEnd}>
      <Droppable droppableId='todo'>
        {(provided, snapshot) => (
          <div 
            ref={provided.innerRef}  
            {...provided.droppableProps}  
          >
            {(todoData ?? []).map((data, index) => (
                <Draggable
                  key={data.id}
                  draggableId={data.id.toString()}
                  index={index}
                >
                  {(provided, snapshot) => (
                      <List 
                        key={data.id} 
                        id={data.id}
                        title={data.title}
                        completed={data.completed} 
                        provided={provided} 
                        snapshot={snapshot} 
                        todoData={todoData} 
                        setTodoData={setTodoData} />
                  )}
                </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  </div>;
})

export default Lists;

App.js

import React, {useState} from 'react'
import "./App.css"
import Lists from './components/Lists'
import Form from './components/Form'
export default function App() {
  // console.log('App Component')
    const [todoData, setTodoData] = useState([
      {
        id: 1,
        title: '운동하기',
        completed: false,
      },
      {
        id: 2,
        title: '공부하기',
        completed: false,
      }
    ])
    const [value, setValue] = useState("")

    return (
      <div className="flex items-center justify-center w-screen h-screen bg-blue-100" >
        <div className='full p-6 m-4 bg-white rounded shadow md:w-3/4 md:max-w-lg lg:w-3/4 lg:max-w-lg'>
          <div className="flex justify-between mb-3">
            <h1>할 일 목록</h1>
          </div>
          <Lists todoData={todoData} setTodoData={setTodoData} />
          <Form value={value} setValue={setValue} setTodoData={setTodoData}/>
        </div>
      </div>
    )
  }