Mouseleave triggered when hovering again after initial hover

Reproduction example

https://codesandbox.io/s/vigorous-leaf-xll7kf?file=/src/App.test.js

Prerequisites

1. Obtain the text element with const text = screen.getByText('Test').
2. Hover over the text element obtained in step 1.
3. Hover over the button that appears as a result of the hover action in step 2.
4. At the moment of performing the hover action in step 3, the button element disappears (the mouseleave event is triggered).

Expected behavior

I want to test that hovering over the text 'Test' and then hovering over the button will display a tooltip.

Actual behavior

Due to the button element disappearing when hovering over it, I am unable to validate the tooltip display.

User-event version

14.4.3

Environment

Testing Library framework:"@testing-library/react": "^14.0.0"

JS framework: react": "18.2.0"

Test environment: "jest": "^29.5.0"

DOM implementation: "jest-environment-jsdom": "^29.5.0"

Additional context

I tried using the pointer event as shown in the code below, but it didn't work.

const text = screen.getByText('Test')
await user.pointer([
      { target: text },
      { target: screen.getByRole("button") }
]);

Start with the CodeSandbox reproduction and the hover sequence described in the issue, then compare it with the provided user.pointer example. Verify that hovering from the text to the revealed button does not trigger an unintended mouseleave and that the tooltip remains testable; use the stated React, Testing Library, user-event, and jsdom versions when reproducing the behavior.