How to drag and drop in between divs in reactjs?

I tried implementing drag and drop functionality in reactjs using vanilla HTML/js APIs. I almost completed it, but I cannot drop it between the existing divs. I want to add the functionality of dragging and dropping in both the divs (i.e., I should be able to drag any of the divs in the first column and drop anywhere in the second column and vice versa). So far, I am able to drag and drop only at the last index, not in between

Here is what I have tried so far. Please include the code. I am not that strong to follow if you are suggesting something

 <div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
      const App = () => {
        const drop = (e) => {
          e.preventDefault();
          const div_id = e.dataTransfer.getData("div_id");
          const block = document.getElementById(div_id);
          e.target.appendChild(block);
        };
        const dragOver1 = (e) => {
          e.preventDefault();
        };

        const dragStart = (e) => {
          const target = e.target;
          e.dataTransfer.setData("div_id", target.id);
        };

        const dragOver = (e) => {
          e.stopPropagation();
        };

        return (
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              padding: "50px",
            }}
          >
            <div
              onDrop={drop}
              onDragOver={dragOver1}
              id="board-1"
              style={{
                border: "1px solid #222",
                padding: 20,
              }}
            >
              <div
                id="firstfirst"
                draggable
                onDragStart={dragStart}
                onDragOver={dragOver}
              >
                <div>
                  <h1>First Column First Row</h1>
                </div>
              </div>
              <div
                id="firstsecond"
                draggable
                onDragStart={dragStart}
                onDragOver={dragOver}
              >
                <div>
                  <h1>First Column Second Row</h1>
                </div>
              </div>
              {Array.from(Array(2)).map((_, index) => {
                return (
                  <div
                    key={index}
                    id={`first${index}`}
                    draggable
                    onDragStart={dragStart}
                    onDragOver={dragOver}
                  >
                    <h1>First Column Row {index}</h1>
                  </div>
                );
              })}
            </div>
            <div
              id="board-2"
              onDrop={drop}
              onDragOver={dragOver1}
              style={{
                border: "1px solid #222",
                padding: 20,
              }}
            >
              <div
                id="secondfirst"
                draggable
                onDragStart={dragStart}
                onDragOver={dragOver}
              >
                <h1>Second Column First Row</h1>
              </div>
              <div
                id="secondsecond"
                draggable
                onDragStart={dragStart}
                onDragOver={dragOver}
              >
                <h1>Second Column Second Row</h1>
              </div>

              {Array.from(Array(2)).map((c, index) => {
                return (
                  <div
                    key={index}
                    id={`second${index}`}
                    draggable
                    onDragStart={dragStart}
                    onDragOver={dragOver}
                  >
                    <h1> Second Column Row {index} </h1>
                  </div>
                );
              })}
            </div>
          </div>
        );
      };
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>