React beatiful-dnd selected row and selected cell find

Question

I'm making a Tetris-like game with react beautiful dnd. In this game, there are 6 different shapes placed in 4x4 squares - I keep them in objects. I have a 10x10 throne on the other side. I keep the values ​​in it in an array and give null as the default. After printing the 6 objects in my sidebar, I make a draggable object and make my board droppable. How exactly can I match these?

My codes:

const NewTetris = () => {
  const { activeStep, nextQuestionRequest } = useQuestionContext();
  const [start, setStart] = useState(false);
  const questionFinish = () => {
    const datas = {
      question: activeStep + 1,
      answer: 1,
      point: 10,
    };

    nextQuestionRequest(datas);
  };
  const BOARD_WIDTH = 10;
  const BOARD_HEIGHT = 10;

  const [board, setBoard] = useState(createEmptyBoard());
  const [blocks, setBlocks] = useState(generateBlocks());

  function createEmptyBoard() {
    return Array.from({ length: BOARD_HEIGHT }, () =>
      Array(BOARD_WIDTH).fill(0)
    );
  }

  function generateBlocks() {
    return [
      {
        color: "#BBBBBB",
        blocks: [
          [1, 0, 0, 0],
          [1, 0, 0, 0],
          [1, 1, 0, 0],
          [1, 0, 0, 0],
        ],
      },
      {
        color: "#6E4ECD",
        blocks: [
          [1, 1, 0, 0],
          [1, 0, 0, 0],
          [1, 0, 0, 0],
          [1, 0, 0, 0],
        ],
      },
      {
        color: "#0053B7",
        blocks: [
          [1, 1, 0, 0],
          [1, 1, 0, 0],
          [1, 0, 0, 0],
          [0, 0, 0, 0],
        ],
      },
      {
        color: "#E81A6A",
        blocks: [
          [1, 1, 0, 0],
          [1, 0, 0, 0],
          [1, 1, 0, 0],
          [0, 0, 0, 0],
        ],
      },
      {
        color: "#A09805",
        blocks: [
          [0, 0, 0, 0],
          [1, 0, 0, 0],
          [1, 0, 0, 0],
          [1, 1, 1, 1],
        ],
      },
      {
        color: "#7CB500",
        blocks: [
          [0, 1, 0, 0],
          [1, 1, 0, 0],
          [1, 0, 0, 0],
          [1, 0, 0, 0],
        ],
      },

      // Diğer blokları da ekleyin...
    ];
  }



  const onDragEnd = (result) => {
    const { destination, source } = result;
  
    // Eğer bırakıldığı bir hedef yoksa veya hedef sürüklendiği yerse
    if (!destination || destination.droppableId === source.droppableId) {
      return;
    }  
  };

  function rotateBlock(block) {
    const rotatedBlock = [];
    const rowCount = block.length;
    const colCount = block[0].length;

    for (let col = 0; col < colCount; col++) {
      const newRow = [];
      for (let row = rowCount - 1; row >= 0; row--) {
        newRow.push(block[row][col]);
      }
      rotatedBlock.push(newRow);
    }

    return rotatedBlock;
  }

  const onBlockClick = (index) => {
    setBlocks((prevBlocks) => {
      const updatedBlocks = [...prevBlocks];
      updatedBlocks[index].blocks = rotateBlock(updatedBlocks[index].blocks);
      return updatedBlocks;
    });
  };

  return (
    <div className="before-questions">
      <QuestionsHeader />
     
          <div className="question-area">
            <DragDropContext onDragEnd={(result) => onDragEnd(result)}>
              <Row className="w-100">
                <Col md="4">
                  <Sidebar blocks={blocks} onBlockClick={onBlockClick} />
                </Col>
                <Col className="offset-lg-2" md="4">
                  <Board board={board}  />
                </Col>
              </Row>
            </DragDropContext>
            <div className="d-flex justify-content-center w-100 question-fixed-bottom">
              <button
                className={`button-shadow shadow-blue`}
                onClick={questionFinish}
              >
                İlerle
              </button>
            </div>
          </div>
        
      </div>
    </div>
  
};

Sidebar:

import React from "react";

import Block from "./Block";
import { Draggable, Droppable } from "react-beautiful-dnd";

export const Sidebar = ({ blocks, onBlockClick }) => {
  return (
    <Droppable
      droppableId={"sidebar"}
    >
      {(provided, snapshot) => {
        return (
          <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            className={`sidebar row`}
          >
            {blocks.map((block, index) => (
              <div key={index} className="col-6 mb-3">
                <Draggable draggableId={`block-${index}`} index={index}>
                  {(provided) => (
                    
                      <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                        className="d-flex flex-column cursor-pointer"
                        onClick={() => onBlockClick(index)}
                      >
                        {block.blocks.map((row, rowIndex) => (
                          <div key={rowIndex} className="d-flex">
                            {row.map((cell, colIndex) => (
                              <Block
                                key={`${rowIndex}-${colIndex}`}
                                shape={cell}
                                color={block.color}
                              />
                            ))}
                          </div>
                        ))}
                      </div>
                   
                  )}
                </Draggable>
              </div>
            ))}
            {provided.placeholder}
          </div>
        );
      }}
    </Droppable>
  );
};

Board:

import React from 'react';
import BlockBoard from './BlockBoard';
import { Droppable } from 'react-beautiful-dnd';

const Board = ({ board }) => {
  return (
    <div className="board">
      <Droppable droppableId="board" >
        {(provided) => (
          <div
            ref={provided.innerRef}
            {...provided.droppableProps}
            className="board-content d-flex"
          >
            {board.map((row, rowIndex) => (
              <div key={rowIndex} className="board-row">
                {row.map((color, colIndex) => (
                  <BlockBoard
                    key={`${rowIndex}-${colIndex}`}
                    color={color}
                    rowIndex={rowIndex}
                    colIndex={colIndex}
                  />
                ))}
              </div>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </div>
  );
};

export default Board;

I expect these to match drag and drop but I'm still not quite sure how I should make it work.