Unable to drop the component in the DropTarget

[silicon-ninja]

Drag Code

var arm_list_component = animations_list.data.animations?.arm?.map((e) => {
    return <DragDropContainer>
        <div onClick={() => { console.log("ehes") }} >
            <div className='container p-3 items-center bg-red'>
                <h1 className='card-align text-white'>{e.animation}</h1>
            </div>
        </div>
    </DragDropContainer>
  })

Drop Code

 <DropTarget targetKey="foo" >
              <div className=' h-12 w-[312.5rem] bg-slate-400 rounded-t-lg border-b-2 border-gray-600' >
                  <h4 className='pt-4 pl-32 text-gray-700'></h4>
              </div>
</DropTarget>

How it looks for now

[0rangeFox]

Hey @silicon-ninja, it isn't working because your DropTarget has an targetKey value and the DragDropContainer is assuming a default value ("ddc"), then that is assuming that things are not meant to be within that cluster.

[silicon-ninja]

Hey @0rangeFox tried setting the target key for the DragDropContainer as well didn't work. If you don't mind if you have a snippet of code to work with that would be helpful.

[0rangeFox]

Hey again @silicon-ninja, don't forget to manipulate the values from events, without these events, they do nothing, just only enable the "drag & drop" but won't place or anything else. Please check the examples for example this one, is good to give you an idea how you can manipulate it.