[Bug]: Coachmark/Teaching Bubble floats over the modal.

[kehindeoni]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
    Memory: 65.38 GB / 127.71 GB
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.49), ChromiumDev (105.0.1336.2)
    Internet Explorer: 11.0.22000.120

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/kehindeoni/pen/dymjwYa

Bug Description

Actual Behavior

When coachmark is used in a modal that scrolls and you scroll on the modal past the coachmark target, the coachmark floats over the modal.

coachmark float.webm

Expected Behavior

The coachmark should not float over the modal when you scroll.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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