Duplicated GUI with vite + react + three.js #323

I'm trying to use dat.gui with vite + react + tailwind + three.js:

function App() {
  useEffect(() => {
    const gui = new dat.GUI({ width: 400 })
    gui.add(..etc..)

  return (
    <>
      <canvas className='fixed top-0 left-0 outline-none' id="MyCanvas" />
    </>
  )
}

but the gui is duplicated, showing another panel on the back:

and if I click on open, it will open two sets of controls like so:

one set of control do work as intended, the other set does not work at all;

I've tried to pass the autoPlace: false but then the gui won't show up at all anymore

any help is much appreciated

edit:
also each time vite re-render's the page, a new set of gui is added to the viewport:

so it will become unusable like this:

do I have to unmount gui after each render somehow?
btw, I'm putting all the three.js code in a useEffect() hook to be able to render it via react..

edit2:
so on a first glance this seeks to be an issue of gui.dat not dismounting and/or removing the last <div> created on the dom when vite rebuilds the build as I save code changes in the IDE;
does dat.gui have a built-in API to remove the last created DOM element?