[Bug]: Row selecting in DetailedList doesn't work in Vite Dev mode

[ThijsOnGitHub]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 11 
  Browsers:
    Edge: Chromium (127.0.2651.86)
    Internet Explorer: 11.0.22621.3527

Are you reporting an Accessibility issue?

None

Reproduction

https://codesandbox.io/p/sandbox/vite-fluent-ui-demo-8zglrm

Bug Description

Actual Behavior

When you run the command vite and you run it, you can't see the blue checkmark on the selected rows in the DetailedList Component. See repoduction where I created a default vite project and added the detailedList example from the documentation. When you select an row, you don't see the blue checkmark showing that the row is selected.

Expected Behavior

When you run vite you can see the checkmarks when you select an row.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

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.

[spmonahan]

If you remove <StrictMode> in main.tsx the issue disappears. Obviously this is not an actual solution, but a workaround 🙂

This issue will need more debugging to find the root cause but in the past I've seen it related to class component lifecycle methods. For example, an event listener is wired up in a constructor and torn down in componentWillUnmount so it can never be reconnected.