[Bug]: When tree exceeds 10 levels , an error is displayed indentation

[G-bue]

Component

Tree

Package version

9.42.0

React version

17.0.2

Environment

The same problem occurred in the Official example

Current Behavior

When tree exceeds 10 levels , an error is displayed indentation

Expected Behavior

Treeitems that exceed 10 levels are normally indented backward

Reproduction

https://stackblitz.com/edit/pyfd5gsr?file=src%2Fexample.tsx

Steps to reproduce

When tree exceeds 10 levels , an error is displayed indentation

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.

[Hotell]

thanks for report!

this is caused by pre generated array of nesting up to 10 https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts#L49-L59

[Hotell]

@G-bue as a temporary workaround you can manually override css variable which handles the indentation