Fluent UI 9 does not work with SPFx 1.21.1 list view command set extension

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version - 1.21.1
• Node.js version - 22.17.0
• Fluent UI - 9.68.4
• Typescript - 5.3.3

Describe the bug / error

Tried installing @fluentui/react-components@9.68.4 and got below error

Found: @types/react@17.0.87 node_modules/@types/react dev @types/react@"^17.0.87" from the root project peer @types/react@">=16.14.0 <19.0.0" from @fluentui/react-components@9.68.4 node_modules/@fluentui/react-components @fluentui/react-components@"*" from the root project Could not resolve dependency: peer @types/react@"^18.0.0" from @types/react-dom@18.3.7 node_modules/@types/react-dom peer @types/react-dom@">=16.9.0 <19.0.0" from @fluentui/react-components@9.68.4 node_modules/@fluentui/react-components @fluentui/react-components@"*" from the root project

then installed the same with using --force or using --legacy-peer-deps. with any of these it gets installed but while running the gulp serve gets error

This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided

also the intellisense for fluent UI 9 components does not work in VSCode.

I have tried deleting the node modules, clear the npm cache, and reinstalling the node modules.

Steps to reproduce

1. Install @fluentui/react-components in SPFx 1.21.1 list view command set extension without --force or --legacy-peer-deps
2. if error then install the same using --force or --legacy-peer-deps
3. try to add any component from fluent UI 9, ex Toast component. gulp serve command throws error This JSX tag's 'children' prop expects type 'never' which requires multiple children, but only a single child was provided

Expected behavior

Fluent UI 9 should work fine with list view command set extension for SPFx 1.21.1 with all the intellisense and gulp serve should also work fine.

No source files or tests are named. Start by reproducing the dependency installation and gulp serve failure in an SPFx 1.21.1 list view command set extension with Fluent UI 9.68.4, then inspect the React type and peer-dependency versions involved. Done means Fluent UI 9 installs without forced peer resolution, gulp serve compiles, and VS Code IntelliSense works.