Memory Leak: Chat message component is leaking menus when submenu is opened and closed

[johannao76]

Bug Report

When you specify a submenu for the chat component, opening and closing the submenu causes the parent menus to leak.

Leak size: ~500KB for the provided example, can be more depending on the actual menu items added and number of iterations.

Steps

Repro:

1. Go to this link
2. Hover over a chat and click on the ... menu item
3. You will see a submenu with two options
4. Click outside the menu to dismiss it
5. Repeat steps 2-4 a few times
6. Open chrome dev tools and go to the Memory tab
7. Under Profiles (left nav), select "Allocation instrumentation on timeline" and hit the Start button to start profiling
8. Repeat steps 2-4 N times (preferrably an odd number of iterations).
9. On the dev tools, force GC by clicking on the trash can in the profiler view (left nav) and stop profiling
10. Review the timeline and you will see detached UL elements (and all their children).

Expected Result

• No detached elements hanging around

Actual Result

• Detached elements still hanging around. The retainers tree points to FocusZone as potential culprit
  
  And
  

Version

0.43.0

Testcase

Sandbox: https://codesandbox.io/s/fluent-ui-example-1mmyz
Direct link: https://1mmyz.csb.app/