[Bug]: Chart tooltip not visible when rendered on OverlayDrawer (on drawer reopen)

[NehaliSahu]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 30.15 GB / 63.95 GB

 Browsers:
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/qxul5y?file=src%2Fexample.tsx

Bug Description

I am seeing a behavior while consuming react charting library. Am using DonutChart and LineChart within OverlayDrawer. Tooltips on chart show fine when the OverlayDrawer is opened for the first time but when the drawer is closed and reopned the tooltips dont show up.

Actual Behavior

Chart tooltip only show when the drawer is opened for the first time (ie first render of chart). On closing the drawer and reopening it , tooltip is not working. Its probably rendering the tooltip in background. Callout container is getting attached to the default layer below the overlay.

Expected Behavior

Chart tooltip should work every time chart is rendered on OverlayDrawer

Repo :

Have a look at code here: https://stackblitz.com/edit/qxul5y?file=src%2Fexample.tsx
Here since the overlay is not full size I could see tooltip rendering on background.
Attaching a recording for same:
https://github.com/microsoft/fluentui/assets/16573857/7f14b523-6daf-4a45-bd5a-66434faf3092

Logs

No response

Requested priority

Normal

Products/sites affected

Microsoft Azure Development Team

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[khmakoto]

FYI @AtishayMsft.