Pieces not doing what they are supposed to.

[quackquavk]

In my online games page, the pieces are acting weird when dragged.

Screen.Recording.2024-12-10.at.18.11.41.mov

no sure why this is happening.

  <Chessboard
                    onSquareClick={onSquareClick}
                    customSquareStyles={memoizedHighlightSquares}
                    position={gameState.fen}
                    customDarkSquareStyle={{ backgroundColor: theme[1] }}
                    customLightSquareStyle={{ backgroundColor: theme[0] }}
                    onPieceDrop={onDrop}
                    boardOrientation={gameState.playerColor || "white"}
                    animationDuration={animationDuration}
                    arePremovesAllowed={true}
                    showPromotionDialog={promotionDialogue}
                    arePiecesDraggable={!gameFull}
                    promotionToSquare={promotionToSquare}
                    onPromotionPieceSelect={handlePromotion}
                    customBoardStyle={{
                      borderRadius: '0.75rem',
                      overflow: 'hidden',
                      boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
                    }}
                  />```

[mmaciesowicz]

If I had to make a guess, I think you might have adjusted the size or positioning of the board in some parent container and it is messing with the CustomDragLayer component. To confirm, can you also provide the styling to the container/Chessboard component as well? In the meantime, you can try using the boardWidth parameter for Chessboard instead to see if that fixes anything.