[Bug]: Hydration error when using `TabList` with Next.js's `app` router

[leduyquang753]

Library

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

System Info

System:
  OS: Windows 11 10.0.22631
  CPU: (8) x64 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz
  Memory: 10.74 GB / 19.78 GB
Browsers:
  Edge: Chromium (120.0.2210.61)
  Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/p/devbox/fluent-tablist-bug-qm8hqd

Bug Description

Actual behavior

Hydration error:

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Did not expect server HTML to contain a <i> in <div>.

Expected behavior

The page hydrates normally.

Logs

No response

Requested priority

High

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.