I have a page that renders an array of components with dnd context and inside them there are many cards. if I force-reload the page, it works but as times goes on the page gets slower and slower. It also works fine when chrome dev tools are in performance mode.

This is how the component is rendered on the page:

 {vacancies.length > 0 ? (
                  vagasFiltradas.map((vacancy) => (
                    <div className="vagas_container" key={vacancy.id}>
                      <HotNeedsProvider>
                        <Vaga dataVaga={vacancy} />
                      </HotNeedsProvider>
                    </div>
                  ))
                ) : ( ''
                )}

Vaga component:

 <div className='hotNeeds-container-dnd'>
  <DndContext
    sensors={sensors}
    collisionDetection={closestCenter}                              
    onDragStart={handleDragStart}
    onDragOver={handleDragOver} 
    onDragEnd={(handleDragEnd)}                             
   >
     {vagas && (
        <>
           <Indicados/>
            <Candidatos
              data={initialDataVaga}
               loadCandidatos={load}
                dndContainerId={'candidatos'}
              />
          </>
      )}                        
        <DragOverlay >
          {activeId ? (
            <Card id={activeId}   info={overlayData} />
           ): null}
        </DragOverlay>,
  </DndContext>
 </div>

Both components <Indicados/> and Candidatos/> have Sortable context in them:

<SortableContext
 id={dndContainerId}
 items={vagas[candidateType]}
 strategy={horizontalListSortingStrategy}
>
 <div className="candidatos-container-body"
   ref={setNodeRef}
 >
     {isLoading ? (
       <p>Loading...</p>
     ) : ( vagas && vagas[candidateType]?.length > 0) ? (
         vagas[candidateType].map((candidato) => (
           <Card
             key={candidato.id}
             id={candidato.id}
             info={candidato}
             type={candidateType}
             stage={'indicacoes'}
           />
         ))
     ) : (
       <p>No candidates found</p>
     )}
 </div>
</SortableContext>
): ('')}

Card Component, I tried using memo to lessen the re-render:

export const Card = memo(({id,info,type, stage}) => {

  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition
  } = useSortable({ id: info.id, })

const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    touchAction: "none",
  }



  return (
    <div
      className="card-container"
      ref={setNodeRef}   
      style={style}
      {...attributes}
      {...listeners}
    >
    </div>
  )
})

Image of the page

When I try to drag cards from left to the three right droppable containers the cards animations lag almost as if it's not moving. Each row in the page is a Vaga component with the Dnd Context and the page has many more than the ones shown in the image. I tried using memo on the card component to make it re-render less but it was ineffective.