React beautifull Dnd Droppable on top of Droppable not working

Question

I have a app that contains columns of droppables and a droppable modal that appears when a draggable is beeing dragged, but the "hitbox" of the modal's droppable space seems to be very inconsistent / not working.

Code of the Modal in question:

import { Droppable } from 'react-beautiful-dnd';


interface provided {
    show: boolean;    
}
export function GanhouPerdeu({show}: provided) {


    return (
        <div className='envelopeTeste' >
        <div className={` ${ true ? 'slide-up' : 'slide-down' } z-50 fixed bottom-0 left-0 right-0 bg-transparent w-full indexCustom flex gap-2`} >
            <Droppable droppableId={"6"}>
                {(provided: any, snapshot:any) => {
                    return (

                        <div ref={provided.innerRef} {...provided.droppableProps} className="z-50 rounded-sm w-1/2 flex items-center justify-center h-20 customBorderDotted bg-white ml-2 transition-all duration-300 hover:bg-green-500 text-green-500 hover:text-white">
                            <p className="m-0 font-semibold text-lg">GANHOU</p>
                            {provided.placeholder}
                        </div>
                        
                    )
                }}
            </Droppable>
            <Droppable droppableId={"7"}>
                {(provided: any) => {
                    return (
                        <div ref={provided.innerRef} {...provided.droppableProps} className="z-50 rounded-sm w-1/2 relative flex items-center justify-center h-20 customBorderDotted transition-all duration-300 text-red-500 bg-white hover:bg-red-500 hover:text-white">
                            <p className="m-0 font-semibold text-lg">PERDEU</p>
                            {provided.placeholder}
                        </div>
                    )
                }}
            </Droppable>
        </div>
        </div>
    )
}



// ------------ Now for how the columns and this modal are rendered:


        <TaskContext.Provider value={{selectedTasks}}>
        <DragDropContext useDrag={handleGanhouPerdeu} onDragEnd={handleDragEnd} onDragStart={handleDragStart}>
            <div className='flex mt-6 bg-white box-border max-w-full h-auto' >
            <Column title="Lead In" tasks={lead} leads={leadMysql} id="1"/>
            <Column title="Agendamento / Reunião" tasks={contato} id="2"/>
            <Column title="Diagnóstico" tasks={diagnostico} id="3"/>
            <Column title="Teste" tasks={teste} id="4"/>
            <Column title="Proposta de Valor" tasks={negociacao} id="5"/>
            <GanhouPerdeu show={showWinLoss} />
            <Toaster/>
            </div>  
        </DragDropContext>
        </TaskContext.Provider>


// ---------------- Column code


export function Column({tasks, title, id, leads}: colunaProps) {
    const [mostrarPotencial, setMostrarPotencial] = useState<boolean>(false);
    const getTotalValue = (tasks: colunaProps["tasks"]) => {
        let totalValue = 0;
        
        tasks?.forEach(task => {
            totalValue += task.MaxLocalTotal;
        });
        return totalValue.toLocaleString('pt-BR');
    }

    const atualizarEstadoModal = () => {
        setMostrarPotencial(false);
    } 

    const valor = getTotalValue(tasks);

    return (
        <>
        <AddPotential atualizarEstadoModal={ () => atualizarEstadoModal()} mostrarModal={mostrarPotencial} />
        <div className='min-h-screen w-full items-center bg-custom-gray flex flex-col border border-black ml-3  p-1 box-border relative '>
           <div className="triangle-right-white-board absolute"></div> <div className='self-start levantar m-0 flex w-full z-10 justify-between pt-2'><h3 className='self-start m-0 mt-1 ml-8 font-semibold'>{title} </h3> <h2 className={`self-end m-0 mr-4`}>{tasks ? tasks.length : '0'}</h2> </div> {title == 'Proposta de Valor' ? "" : <div className={`triangle-right-grey-board absolute`} ></div> }
            <p className='m-0 self-start mb-6 px-2 text-sm mt-3 font-semibold'>{valor == '0' ? 'R$ 0.00' : 'R$' + valor + '.000'}</p>

            <Droppable droppableId={id}>
                {(provided: any, snapshot: any) => {
                    return (
                        <div className={` ${ title == 'Lead In' ? "" : "h-full" } w-11/12 bg-custom-gray gap-3 items-center flex flex-col `} ref={provided.innerRef} {...provided.droppableProps} isdraggingover={snapshot.isDraggingOver.toString()}>
                            {tasks?.length == 0 ? <div className='flex flex-col items-center justify-center mb-12 ' ><FaBoxOpen size={60} /></div> : "" }
                            {tasks?.map((task: any, index: any) => <Task task={task} index={index} key={task.Id} />)}
                            {provided.placeholder}
                        </div>
                    );
                }}
            </Droppable>
            {/* caso seja o lead ele adiciona a coluna dos potenciais */}
            {title == 'Lead In' ? <Droppable droppableId={"-1"}>
            {(provided: any, snapshot: any) => {
                    return (
                        <>
                        <div className='relative flex items-center gap-2 w-11/12 justify-center mt-8' >
                            <div className='line left'></div>
                            <h3>Potenciais</h3>
                            <div className='line right' ></div>
                        </div>
                        <div className=' w-11/12 h-full bg-custom-gray gap-3 items-center flex flex-col' ref={provided.innerRef} {...provided.droppableProps} isdraggingover={snapshot.isDraggingOver.toString()}>
                            {leads?.map((task: lead, index: any) => <LeadTask task={task} index={index} key={task.id_card} />)}
                            {provided.placeholder}
                        </div>
                        </>
                    );
                }}
            </Droppable> : ""}
            { title == 'Lead In' ?  <button className=' mt-4 px-4 mb-4 flex items-center justify-center gap-2 p-2 rounded-md  oultine-none border-none bg-blue-500 text-white font-semibold cursor-pointer hover:bg-blue-600 transition-all duration-500 hover:shadow-lg hover:scale-105' onClick={() => setMostrarPotencial(!mostrarPotencial)}> <IoMdAddCircle/>  Potencial </button> : ""}
        </div>
        </>
    )
}

I wanted the entire modal to function as another column, allowing for drag-and-drop functionality. However, if I start dragging a column from the left side and move it to the modal, the right part of the modal doesn't work correctly. Similarly, if I start with a draggable column on the left side, the right side of the modal fails to accept drops.