create form fields on drag and drop in ReactJs

Question

how to create a form field like input box by dragging a field option button from sidebar menu just like jotform drag and drop functionality in reactjs.

I want to create form field on drop function instead of appending dragged element

drop(e){
        let card_id = e.dataTransfer.getData('card_id')
        let card = document.getElementById(card_id)
        
        e.target.appendChild(card)
    }
    
    drag(e){
        e.preventDefault();
    }
    render() {
        return (
            <div className = {this.props.className}
            id = {this.props.id}
            onDragOver={(e)=>{this.drag(e)}}
            onDrop={(e)=>{this.drop(e)}}
            >
            {this.props.children} 
            </div>
        );
    }