react-sortable-hoc Error while building develop enviroment, Type 'Element' is not assignable to type 'ReactNode

Question

I am currently working on a project that involves using a stepper with a reordable list using the react-sortable-hoc library. While everything seems to work locally, I am encountering an issue during the development build that produces the following log:

72      Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.
73  Overload 2 of 2, '(props: DragDropContextProps, context: any): DragDropContext', gave the following error.
74    Type 'Element' is not assignable to type 'ReactNode'.
75
76 316 |                     <div>
77 317 |                         <DragDropContext onDragEnd={handleReorder}>
78> 318 |                             <SortableTable
79      |                             ^
80 319 |                                 isDetalhamento={props.isDetalhamento}
81 320 |                                 dadosSubtema={subtemasSelecionados}
82 321 |                                 dadosQuestoes={questoesSelecionadas}
83error: build error: error building at STEP "RUN npm run build:develop": error while running runtime: exit status 1 

and here is the SortableTable component

const DragHandle = sortableHandle(() =><MdOutlineDragHandle /> );

// ...

//@ts-ignore
const SortableItem = sortableElement(({ value, indice, acoes, id_subtema, questoes, removeItem, isDetalhamento }): React.ReactNode => (
    <li className={"flex flex-col"}>
        <div className={"flex flex-row"}>
            {isDetalhamento ? null : <DragHandle />}
            <span style={{ marginLeft: '5px', marginRight: '10px' }}>{indice}</span>
            <span style={{ marginLeft: '5px', marginRight: '10px' }}>{value}</span>
            {acoes && !isDetalhamento ? <span style={{ marginLeft: 'auto' }}>{acoes}</span> : null}
        </div>
        <div>
            <ListaQuestoesReordenavel id_subtema={id_subtema} indiceSubtema={indice} questoes={questoes} removeItem={removeItem} isDetalhamento={isDetalhamento} />
        </div>
    </li>
));

//@ts-ignore
const SortableContainer = sortableContainer(({children}): React.ReactNode => <ul>{children}</ul>);

// ...
const SortableContainer = sortableContainer(({ children }) => <ul>{children}</ul>);

export default function SortableTable({dadosSubtema, dadosQuestoes, /*...otherProps*/}): React.ReactNode {
  // ... component logic
  return (
    <div className={"flex flex-row justify-between"}>
      <div className={"bg-gray-200 rounded-2xl p-2 font-semibold "}>
        <SortableContainer onSortEnd={onSortEnd} useDragHandle>
          {/* ... */}
<SortableItem
                            key={index}
                            index={index}
                            value={"   "+value.descricao}
                            indice={value.indice ? value.indice+"  " : index+1+"  "}
                            acoes={value.acoes}
                            id_subtema={value.id}
                            questoes={value.questoes}
                            removeItem={removeQuestao}
                            isDetalhamento={isDetalhamento}
                        >
                        </SortableItem>
        </SortableContainer>
      </div>
      <div className={"ml-7"}>
        {data.length > 0 ? (
          <MainPage.Button
            onClick={handleOpenFormularioModal()}
            text={"Visualizar"}
            textColor={"text-[#fff]"}
            backgroundColor={"bg-[#4453A7]"}
          />
        ) : null}
      </div>
    </div>
  );
};

It seems like a type issue related to ReactNode, but I'm not sure how to resolve it. I've already tried adding React.ReactNode as a type but it didn't resolve the problem.

Any help or insights on how to address this issue would be greatly appreciated.