Bug: Can't drop window on first drag

[fengelniederhammer]

Hi, I encountered a rather unfortunate bug:

https://stackblitz.com/edit/vitejs-vite-uzhhsevp?file=src%2FApp.tsx

import { useState } from 'react';

import { Mosaic, MosaicWindow } from 'react-mosaic-component';
import 'react-mosaic-component/react-mosaic-component.css';

function App() {
  const [value, setValue] = useState({
    direction: 'row',
    first: 'first',
    second: 'second',
    splitPercentage: 50,
  });

  return (
    <div style={{ height: '500px' }}>
      <Mosaic
        value={value}
        renderTile={(id, path) => (
          <MosaicWindow title={id} path={path}>
            {id}
          </MosaicWindow>
        )}
        onChange={(newNode) => {
          setValue(newNode);
        }}
      />
    </div>
  );
}

export default App;

using React 18 or 19:

20251111-1413-30.5117477.mp4

• Drag the header of "second"
• It shows the "not allowed" cursors and I'm not able to drop it anywhere.
• When I release the mouse, then the view simply disappears
• When I drag the header of "first", then "second" reappears and I can drop it in the expected places.

Somehow the drop targets don't work on the initial drag, but only after changing something. It would be great if you could check what's wrong and provide a solution!

[fengelniederhammer]

FWIW: This only appears in React's StrictMode.