Using react-beautiful-dnd unable to get drageffect

Question

I am developing an editor for my application. For that i have different component for different context like paragraph, image, heading etc. for Drag and drop i am using beautiful dnd. Each component have a seperate Draggable. But i am unablde to produce the dragging effect.

Please help me.

Here is my code:

import styled from "styled-components";
import Heading from "../ui/Heading";
import { useState } from "react";
import Button from "../ui/Button";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"

const NewLessonContainer = styled.div`
    display: grid;
    box-shadow: var(--box-shadow-pop);
    border-radius: var(--border-radius);
`;
const NewLessonHeading = styled.div`
    padding-left: 2rem;
`;
const NewLessonEditorContainer = styled.div`
    padding: 2rem;
    margin: 2rem;
    box-shadow: var(--box-shadow-down);
    border-radius: var(--border-radius);
`;
const NewLessonEditor = styled.div`
    display: grid;
    padding: 1rem;
    border: var(--border-primary);
    border-radius: var(--border-radius);
`;
const NewLessonToolbar = styled.div`
    display: flex;
    gap: 1rem;
    padding-bottom: 0.5rem;
    overflow-wrap: normal;    
    border-bottom: var(--border-primary);
    &>button {
        background-color: var(--body-background-primary);
        border: var(--border-primary);
        color: var(--brand-color-primary);
        &:hover {
            box-shadow: var(--box-shadow-down);
        }
    }
`;
const NewLessonEditorMain = styled.div`
    padding: 2rem 0rem 0rem 1rem;
    
`;
const HeadingComponent = styled.div`
    padding: 2rem;
    border-radius: var(--border-radius);
    border: var(--border-primary);
    margin-bottom: 2rem;
    outline: none;
    &>div {
        margin-bottom: 2rem;
    }
`;
const SimpleComponentEditor = styled.textarea`
    width: 90%;
    margin-right: 2rem;
    background-color: var(--body-background-primary);
    border-radius: var(--border-radius);
    padding: 1.2rem;
    border: none;
    color: var(--text-color-primary);
    overflow-y: scroll;
    resize: none;
    &:focus {
        outline: none;
    }
    &:blur {
        outline: none;
    }
`;




function CreateNewLesson() {

    const [count, setCount] = useState(0);
    const [newComponent, setNewComponent] = useState([{}]);

    function AddComponent(type) {
        setCount(count+1)
        let id = count;
        let tempComponent;
        if(type==='headingone'){
            tempComponent = {
                id,
                type: "Heading One",
                content: "",                
            }            
        }
        else if(type==='headingtwo'){
            tempComponent = {
                id,
                type: "Heading Two",
                content: ""
            }          
         }
         else if(type==='headingthree'){
            tempComponent = {
                id,
                type: "Heading Three",
                content: ""
            }          
         }

         setNewComponent([...newComponent, tempComponent]);

         
    }
    
    function OnChangeHandler(event, componentId) {
        console.log("Hello");
        let abc = event.target.value;
        console.log(abc);
        setNewComponent(newComponent.map(newCompo => {
            if(newCompo.id === componentId) {
                return {...newCompo, content: newCompo.content = event.target.value};
            }
            else {
                return newCompo;
            }
        }))       
    }

    function OnDeleteHandler(componentId) {
        console.log(componentId);
        setNewComponent(newComponent.filter((newCompon) => newCompon.id !== componentId));
        console.log("Hello");
        console.log(newComponent);
    }

    return(
        <NewLessonContainer>
            <NewLessonHeading>
                <Heading as="h3">Create New Lesson</Heading>
            </NewLessonHeading>
            <NewLessonEditorContainer>
                <NewLessonEditor>
                    <NewLessonToolbar>
                        <button onClick={() => AddComponent('headingone')}>h1</button>
                        <button onClick={() => AddComponent('headingtwo')}>h2</button>
                        <button onClick={() => AddComponent('headingthree')}>h3</button>
                    </NewLessonToolbar>
                    <DragDropContext 
                        onDragEnd={() => console.log("Drag N Drop Event Occured")}>
                    <Droppable droppableId="lessoneditormain" type="group">
                    {(provided) => (

                        <div {...provided.droppableProps} ref={provided.innerRef}>    
                        <NewLessonEditorMain >
                            { 
                            newComponent.map(
                            (newComp) => (((newComp.type === "Heading One") ?
                            <> 
                            <Draggable draggableId={newComp.id} key={newComp.id}>
                            {(provided) => (
                                <div {...provided.dragHandleProps} {...provided.draggableProps} ref={provided.innerRef}>
                                <HeadingComponent id={newComp.id} key={newComp.id}>
                                    <div>
                                        H1 Heading
                                    </div>
                                    <div>
                                        <SimpleComponentEditor placeholder={newComp.id} onChange={ (event) => OnChangeHandler(event, newComp.id) }/>
                                    </div>                                
                                    <div>
                                        <Button size="mini" variation="colorprimary" onClick={() => OnDeleteHandler(newComp.id)}>Delete</Button>
                                    </div>
                                </HeadingComponent>
                                </div>
                            )}
                            </Draggable>
                            </> :
                            (newComp.type === "Heading Two") ? 
                            <>
                            <Draggable draggableId={newComp.id} key={newComp.id}>
                            {(provided) => (
                                <div {...provided.dragHandleProps} {...provided.draggableProps} ref={provided.innerRef}>                                
                                <HeadingComponent id={newComp.id} key={newComp.id}>
                                    <div>
                                        H1 Heading
                                    </div>
                                    <div>
                                        <SimpleComponentEditor placeholder={newComp.id} onChange={ (event) => OnChangeHandler(event, newComp.id) }/>
                                    </div>                                
                                    <div>
                                        <Button size="mini" variation="colorprimary" onClick={() => OnDeleteHandler(newComp.id)}>Delete</Button>
                                    </div>
                                </HeadingComponent>
                                </div>
                            )}
                            </Draggable>
                            </> :(newComp.type === "Heading Three") ? 
                            <>
                            <Draggable draggableId={newComp.id} key={newComp.id}>
                            {(provided) => (
                                <div {...provided.dragHandleProps} {...provided.draggableProps} ref={provided.innerRef}>
                                <HeadingComponent id={newComp.id} key={newComp.id}>
                                    <div>
                                        H1 Heading
                                    </div>
                                    <div>
                                        <SimpleComponentEditor placeholder={newComp.id} onChange={ (event) => OnChangeHandler(event, newComp.id) }/>
                                    </div>                                
                                    <div>
                                        <Button size="mini" variation="colorprimary" onClick={() => OnDeleteHandler(newComp.id)}>Delete</Button>
                                    </div>
                                </HeadingComponent>
                                </div>
                            )}
                            </Draggable>
                            </> : 
                            <></> 
                            ) 
                            ) 
                            )
                            }
                        </NewLessonEditorMain>
                        </div>
                    )}
                    </Droppable>
                    </DragDropContext>
                </NewLessonEditor>
            </NewLessonEditorContainer>
        </NewLessonContainer>        
    )
}

export default CreateNewLesson;

I am expecting to get the dragging effect.