위와 같은 에러가 뜨게됨

{root.children?.map((childNode, index) => (
        <>
          <ConnectedLine
            from={root.location}
            to={data[childNode].location}
            fromRadius={70 - (depth + 1) * 10}
            toRadius={60 - (depth + 1) * 10}
          />
          <DrawMindMap data={data} key={index} root={data[childNode]} depth={depth + 1} parentNode={root} />
        </>
      ))}

코드는 위와 같았는데 ConnectedLine에도 key를 넣어보고 DrawMindMap에도 key를 넣어봤는데 에러는 사라지지 않았다.

찾아보니 key는 map으로 생성하고 있는 요소에 key를 넣어야 합니다.

{root.children?.map((childNode, index) => (
        <React.Fragment key={childNode}>
          <ConnectedLine
            from={root.location}
            to={data[childNode].location}
            fromRadius={70 - (depth + 1) * 10}
            toRadius={60 - (depth + 1) * 10}
          />
          <DrawMindMap data={data} key={index} root={data[childNode]} depth={depth + 1} parentNode={root} />
        </React.Fragment>
      ))}

<></>에 key를 넣을 수 없으니 React.Fragment로 선언을 하고 key를 넣는 방식으로 해결하였습니다.