[Bug]: Menu + Button + Overflow makes the MenuPopover rendered at wrong location

[chenxinyanc]

Library

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

System Info

(Using CodeSandbox)

  "dependencies": {
    "@fluentui/react-components": "9.18.6",
    "@fluentui/react-icons": "2.0.199",
    "react": "^17",
    "react-dom": "^17",
    "react-scripts": "latest"
  },

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/s/fluent-ui-v9-overflow-on-toolbar-nlj63e?file=/example.tsx

Bug Description

Actual Behavior

Expected Behavior

There is a workaround: Wrap the <Button> inside a <div>, shown as below

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.