Работа с React beautiful-dnd. Помогите если работали с этим. Проблема с id

Создавал клона Trello Читал документацию и посматривал видео с ютуба

import { useState } from "react";
import AddCardList from "../../components/TrelloList/AddCardList/AddCardList";
import TrelloList from "../TrelloList/TrelloList";
import TrelloData from "../../trellodata";
import ContextAPI from "../../ContextAPI";
import { v4 as uuidv4 } from "uuid";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import styles from "./App.module.css";

function App() {
  const [data, setData] = useState(TrelloData);

  const updateListTitle = (updatedTitle, listId) => {
    const list = data.lists[listId];
    list.title = updatedTitle;
    setData({
      ...data,
      lists: {
        ...data.lists,
        [listId]: list,
      },
    });
  };

  const addCard = (title, listId) => {
    const newCardId = uuidv4();

    const newCard = {
      id: newCardId,
      title,
    };

    const list = data.lists[listId];
    list.cards = [...list.cards, newCard];
    setData({
      ...data,
      lists: {
        ...data.lists,
        [listId]: list,
      },
    });
  };

  const addList = (title) => {
    const newListId = uuidv4();
    setData({
      listIds: [...data.listIds, newListId],
      lists: {
        ...data.lists,
        [newListId]: {
          id: newListId,
          title,
          cards: [],
        },
      },
    });
  };

  const onDragEnd = () => {};

  return (
    <ContextAPI.Provider value={{ updateListTitle, addCard, addList }}>
      <div className={styles.root}>
        <DragDropContext onDragEnd={onDragEnd}>
          <Droppable droppableId="12345" type="list" direction="horizontal">
            {(provided) => (
              <div className={styles.container} ref={provided.innerRef}
                {...provided.droppableProps}
              >
                {data.listIds.map((listID, index) => {
                  const list = data.lists[listID];
                  return <TrelloList list={list} key={listID} index={index}/>;
                })}
                <div>
                  <AddCardList type="list" />
                  {provided.placeholder}
                </div>
              </div>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    </ContextAPI.Provider>
  );
}

export default App;


import ListTitle from "../../components/TrelloList/ListTitle/ListTitle";
import TrelloCard from "../../components/TrelloList/TrelloCard/TrelloCard";
import AddCardList from "../../components/TrelloList/AddCardList/AddCardList";
import styles from "./TrelloList.module.css";
import { Draggable, Droppable } from "react-beautiful-dnd";

const TrelloList = ({ list, index }) => {
  return (
    <Draggable draggableId={list.id} index={index}>
      {(provided) => (
        <div {...provided.draggableProps} ref={provided.innerRef}>
          <div className={styles.paper}>
            <ListTitle title={list.title} listId={list.id} />
            <Droppable droppableId={list.id}>
              {(provided) => (
                <div ref={provided.innerRef} {...provided.droppableProps}>
                  {list.cards.map((card, index) => (
                    <TrelloCard card={card} key={card.id} index={index} />
                  ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
            <AddCardList type="card" listId={list.id} />
          </div>
        </div>
      )}
    </Draggable>
  );
};

export default TrelloList;


import { Draggable } from "react-beautiful-dnd";
import styles from "./TrelloCard.module.css";

const TrelloCard = ({ card, index }) => {
  return (
    <Draggable draggableId={card.id} index={index}>
      {(provided) => 
          ( 
            <div ref={provided.innerRef} {...provided.dragHandleProps}
                  {...provided.draggableProps}>
                  <div className={styles.paper}>{card.title}</div>
            </div>
          )}
    </Draggable>
  );
};

export default TrelloCard;

const TrelloData = {
  lists: {
    "01list": {
      id: "01list",
      title: "To do",
      cards: [
        {
          id: "01card",
          title: "Doing homework",
        },
        {
          id: "02card",
          title: "Walking",
        },
        {
          id: "03card",
          title: "Cleaning",
        },
      ],
    },
    "02list": {
      id: "02list",
      title: "In progress",
      cards: [],
    },
  },
  listIds: ["01list", "02list"],
};

export default TrelloData;