Content of React Tinymce Editor disappeared after Drag and Drop and unable to focus it again

Question

Packages that I use: react-beautiful-dnd, tinymce-react

Here is the complete Implementation. I am trying to order the Tinymce Editor with drag and drop. Default content of the editor is from the list content not using any state for that.

const Home = () => {
  const [items, setItems] = useState([
    {
      id: "one",
      content: "Item 1",
    },
    {
      id: "two",
      content: "Item 2",
    },
    {
      id: "three",
      content: "Item 3",
    },
  ]);
  const contentRefs = useRef([]);
  const onDragEnd = (result) => {
    const newItems = Array.from(items);
    const [removed] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, removed);
    setItems(newItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                  <div
                    snapshot={snapshot}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    ref={provided.innerRef}
                  >
                    <Editor
                      onInit={(evt, editor) =>
                        (contentRefs.current[index] = editor)
                      }
                      value={item.content}
                      init={{
                        height: 200,
                      }}
                      onChange={(e) =>
                        handleItemContent(e.target.getContent(), index)
                      }
                    />
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default dynamic(() => Promise.resolve(Home), {
  ssr: false,
});

Before drag n drop.

After drag n drop.

The editor cannot be focused again and there is no console error.

Next.js (Also disabled SSR) and not working.

For more information, I have implemented the code in here Demo It is working there for some reason and I don't know why.

Initially I am trying it with InertiaJs and I though it may be because of InertiaJS or Vite but a fresh installation of NextJs is not working neither.

Github source code

Versions

1. React - 18
2. Next - 14.0.4
3. Dnd - 13.1.1
4. Tinymce - 4.3.2