fix: prevent dnd hydration errors

Author: remziatay

src/ChessboardProvider.tsx

@@ -16,6 +16,7 @@ import {
   use,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -300,6 +301,9 @@ export function ChessboardProvider({
   // the animation timeout whilst waiting for animation to complete
   const animationTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+  // unique id for dnd context, we need this to prevent hydration issues
+  const dndId = useId();
+
   // if the position changes, we need to recreate the pieces array
   useEffect(() => {
     const newPosition =
@@ -667,6 +671,7 @@ export function ChessboardProvider({
         onDragEnd={handleDragEnd}
         onDragCancel={handleDragCancel}
         sensors={sensors}
+        id={dndId}
       >
         {children}
       </DndContext>