할일 관리 앱(메모이제이션)

import { useId } from "react";

type CheckboxProps = Omit<React.ComponentPropsWithoutRef<"input">, "type"> & {
  type?: "checkbox";
  parentClassName: string;
};
export default function Checkbox(props: CheckboxProps) {
  const uuid = useId();
  const { parentClassName, children, ...rest } = props;
  return (
    <>
      <div className={parentClassName}>
        <input id={uuid} {...rest} />
        <label htmlFor={uuid}>{children}</label>
      </div>
    </>
  );
}

useEffect(() => {
    const randomText = Array.from(
      { length: 100 },
      (_, index) => `Todo Item #${index + 1}`,
    );

    randomText.forEach((text) => addTodo(text));
  }, []);

대량 데이터 생성 후 테스트를 하는데 중복 키값이 생성되었는데요. uuid 부분인 것 같은데. 노트북 장비 사양 때문에 그런건지요?

installHook.js:1 Encountered two children with the same key, 1770775434402. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

// 아래와 같은 코드 내에서 key에 할당한 값이 중복되는 지를 확인해 보세요.
{todos.map((todo, index) => (  
    <div key={index}>{todo}</div>
))}