перетащите с изменяемым размером, используя reactjs

Question

Я очень новичок в ReactJS (2-дневной давности), у меня есть некоторые требования: нужно сделать пример перетаскивания в любом месте на моем экране с измененным (удаленным) содержимым. Я попробовал образец примера, и я хочу также изменить размер в своем коде. Пожалуйста, проверьте мой приведенный ниже код и помогите мне с этими друзьями.

Я обошелся без html страницы, вот ссылка на пример: https://stackblitz.com/edit/react-custom-drag-and-drop-y5xu5p?file=index.js

Текущий вывод: Expected output :

my App.js:

import React, { Component } from 'react';
import './App.css';
import logo from './logo.svg';
import { Resizable, ResizableBox } from 'react-resizable';
export default class AppDragDropDemo extends Component {
    state = {
        tasks: [
            // {name:"Learn Angular",category:"wip", bgcolor: "yellow"},
            // {name:"React", category:"wip", bgcolor:"pink"},
            // {name:"Vue", category:"complete", bgcolor:"skyblue"}
            {name:"Company Name",category:"wip", bgcolor: "white"},
            {name:"Carrer Objective", category:"wip", bgcolor:"white"},
            {name:"Company Location", category:"complete", bgcolor:"white"}
          ]
    }

    onDragStart = (ev, id) => {
        console.log('dragstart:',id);
        ev.dataTransfer.setData("id", id);
    }

    onDragOver = (ev) => {
        ev.preventDefault();
    }

    onDrop = (ev, cat) => {
       let id = ev.dataTransfer.getData("id");
       
       let tasks = this.state.tasks.filter((task) => {
           if (task.name == id) {
               task.category = cat;
           }
           return task;
       });

       this.setState({
           ...this.state,
           tasks
       });
    }

    render() {
        var tasks = {
            wip: [],
            complete: []
        }

        this.state.tasks.forEach ((t) => {
            tasks[t.category].push(
                 this.onDragStart(e, t.name)}
                    draggable
                    className="draggable"
                    style = {{backgroundColor: t.bgcolor}}
                >
                    {t.name}
                
            );
        });
        return (
             {/ * ДЕМОНСТРАЦИОННОЕ УПРАВЛЕНИЕ  * /} this.onDragOver (e)} onDrop = {(e) => {this.onDrop (e, "wip")}}> Теги  {tasks.wip}  this.onDragOver (e)} onDrop = {(e) => this.onDrop (e, "завершено")}> lo go {tasks.complete}  ); }} 

мой индекс. js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App/>, document.getElementById('root'));
registerServiceWorker();