React failing to update DOM after a element was moved using javaScript from another library

Question

I'm using the UIKit (arrange) functionality to drag and drop things on the screen, and it has been working great until I start to have this error:

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

UIKit is moving the list element li from one group ul to another ul. Because I'm using UIKit to handle the drag-drop it works great until I change the state, and react need to render the screen where I get the error above.

Is it possible to discard the virtual dom and ask to react to recreate or to manually update the virtual DOM to reflect the changes on the UI? Or any other ideas are welcome.

Following this document it seems, that is possible to integrate with other libs that alter the DOM (https://reactjs.org/docs/integrating-with-other-libraries.html) however it is an old doc and, I found a blog article to recreate the forceUpdate with this custom hook:

import React, { useState } from 'react';
const useForceUpdate = () => useState()[1];
const App = () => {
  const forceUpdate = useForceUpdate();
  console.log('rendering');
  return <button onClick={forceUpdate}>Click To Render</button>;
};

So I'm calling the forceUpdate before re-render but still getting the same error

Answer 1

Had to hack around to solve this one, I'll leave the question open a little longer in case someone comes up with a less hack solution than my solution

I had to re-add the removed element to the dom so react would be happy and delete, for the extra added element I did not have to do anything, react did not freak out with an extra element, but for the one remove before dispatch the function to update the persistent data and re-render I did this:

  function removed(a) {
    a.srcElement.appendChild(a.detail[1]);
    dispatch({
      type: "deleteTodo",
      payload: { id: +a.detail[1].id },
    });
  }

I can't even notice the element been re-added for react be able to remove