How to drag and drop an item between two ReactGridLayout?

Question

I have two ReactGridLayout in two Grid. One is on the right side and another is on the left side. I want to drag and drop the right items in their Grid and to the left Grid and drag left items just to the right Grid. I've written the below code and it works but when I drag one item from the left Grid and drop it in its place (not on the right side, leave it on the left side). It appears on the right side. I want to prevent it by knowing about the mouse in which Grid or something like this. I am appreciate if you can help me

import React, { useState, useEffect } from "react";
import RGL, { Responsive, WidthProvider } from "react-grid-layout";
import { Divider, Grid } from "@mui/material";
import ClearIcon from '@mui/icons-material/Clear';


const ReactGridLayout = WidthProvider(RGL);

export default function DynamicGrid() {

  const leftLayout = [
    { i: "0", title: "0", disable: false, x: 0, y: 0, w: 12, h: 2 },
    { i: "1", title: "1", disable: false, x: 0, y: 0, w: 12, h: 2 },
    { i: "2", title: "2", disable: false, x: 0, y: 0, w: 12, h: 2 },
    { i: "3", title: "3", disable: false, x: 0, y: 0, w: 12, h: 2 },
    { i: "4", title: "4", disable: false, x: 0, y: 0, w: 12, h: 2 }
  ];



  const [leftItems, setLeftItems] = useState(leftLayout);
  const [rightItems, setRightItems] = useState<any>([]);

  const handleLayoutChange = (layout: any, layouts: any) => {
    localStorage.setItem("grid-layout", JSON.stringify(layouts));
  };

  const handleDrag = (layout: string, oldItem: any, newItem: { i: any; x: any; y: any; w: any, h: any }) => {
    if (layout === "right") {
      setRightItems((prevItems: any) =>
        prevItems.map((item: any) =>
          item.i === newItem.i ? { ...item, w: newItem.w, h: newItem.h, x: newItem.x, y: newItem.y } : item
        )
      );
    } else {
      const myLeftItemsList = [...leftItems];
      let test = myLeftItemsList.find((item: any) => item.i == newItem.i)

      if (test) {
        test.disable = true;
        test.h = 1;
        test.w = 2;
        test.x = newItem.x;
        test.y = newItem.y;
      }
      setLeftItems(myLeftItemsList);
      setRightItems((prevState: any) => (
        [
          ...prevState,
          test,
        ]
      ));


    }
  };

  const deleteItem = (item: any) => {
    const myLeftItemsList = [...leftItems];
    let test = myLeftItemsList.find((i: any) => i.i == item.i)

    debugger
    if (test) {
      test.disable = false;
      test.w=12;
      test.h=2;
      test.x=0;
      test.y=0;
    }
    setLeftItems(myLeftItemsList);
    setRightItems(rightItems.filter((a: any) => a.i != test?.i));
  }


  return (
    <div style={{ direction: "ltr" }}>
      <Grid container item xs={12} spacing={1}>

        <Grid item xs={1}>

          <ReactGridLayout
            // {...this.props}
            rowHeight={30}
            layout={leftItems}
            cols={12}

            isDroppable={true}
            isResizable={false}
            // droppingItem={{ i: "xx", h: 50, w: 250 }}
            onDragStop={(layout, oldItem, newItem) => handleDrag("left", oldItem, newItem)}
          // onResizeStop={(layout, oldItem, newItem) => handleDrag("left", oldItem, newItem)}
          >
            {leftItems.map((itm, i) => (
              !itm.disable ?
                <div key={itm.i} data-grid={itm} className="block">

                  {itm.title}
                </div> : <></>
            ))}
          </ReactGridLayout>
        </Grid>
        <Grid item xs={1}>
          <Divider orientation="vertical" >
          </Divider>
        </Grid>
        <Grid item xs={10}>
          <ReactGridLayout
            layout={rightItems}//{{ lg: rightItems, md: rightItems }}
            isResizable={true}
            onDragStop={(layout, oldItem, newItem) => handleDrag("right", oldItem, newItem)}
            onResizeStop={(layout, oldItem, newItem) => handleDrag("right", oldItem, newItem)}
          >
            {rightItems.map((itm: any, i: any) => (
              <div key={itm.i} data-grid={itm} className="block">
                <div style={{ display: 'flex' }} onClick={() => deleteItem(itm)}>
                  <ClearIcon
                    style={{ color: "#34495E", margin: "5px", width: "15px" }}
                  />
                </div>
                <div className="block">
                  {itm.title}
                </div>


              </div>
            ))}

          </ReactGridLayout>
        </Grid>
      </Grid>
    </div>

    );
    }

The last thing, I've searched a lot about finding a library and I finally found react-grid-layout-between. It's good but items in dnd library are not resizable, So it's not appropriate for me.