Javascript – drag mouse and select in react

I have this react code:

import React, { useState } from 'react';

const App = () => {
  const [selectedSquare, setSelectedSquare] = useState(null);

  const handleSquareClick = (squareIndex) => {
    setSelectedSquare(squareIndex);
  };

  return (
    <div>
      <style>
        {`
        .square-row {
          display: flex;
        }
        
        .square {
          width: 100px;
          height: 100px;
          background-color: #ccc;
          margin-right: 10px;
          cursor: pointer;
        }
        
        .selected {
          background-color: orange;
        }
        `}
      </style>
      <div className="square-row">
        <div
          className={`square ${selectedSquare === 1 ? 'selected' : ''}`}
          onClick={() => handleSquareClick(1)}
        ></div>
        <div
          className={`square ${selectedSquare === 2 ? 'selected' : ''}`}
          onClick={() => handleSquareClick(2)}
        ></div>
        <div
          className={`square ${selectedSquare === 3 ? 'selected' : ''}`}
          onClick={() => handleSquareClick(3)}
        ></div>
      </div>
      <div className="square-row">
        <div
          className={`square ${selectedSquare === 4 ? 'selected' : ''}`}
          onClick={() => handleSquareClick(4)}
        ></div>
        <div
          className={`square ${selectedSquare === 5 ? 'selected' : ''}`}
          onClick={() => handleSquareClick(5)}
        ></div>
        <div
          className={`square ${selectedSquare === 6 ? 'selected' : ''}`}
          onClick={() => handleSquareClick(6)}
        ></div>
      </div>
    </div>
  );
};

export default App;

This simulates 6 squares if I click one of them the color changes. I want to know if there’s a way I could drag my mouse throughout the area and select multiple of them at the same time, like selecting a bunch of files from the file explorer, but in react.