Custom rendering for TextField control is not working as described in Fluent UI Sample Code

[hassaanmasood]

Environment Information

• Fluent UI Package version(s): 8.55.1
• Typescript version(s):4.5.5
• React version(s):17.0.2
• Browser and OS versions: Not relevant to OS

Please provide a reproduction of the bug in a codepen:

When exporting Fluent UI Sample code for TextFields Custom Label Rendering from"https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield", it works fine on CodePen. But when using same code in VS Code, it gives error:

Type '(props: ITextFieldProps, defaultRender: IRenderFunction) => JSX.Element' is not assignable to type 'IRenderFunction'.
Types of parameters 'props' and 'props' are incompatible.
Type 'ITextFieldProps | undefined' is not assignable to type 'ITextFieldProps'.
Type 'undefined' is not assignable to type 'ITextFieldProps'.

Actual behavior:

Function mapping is not working as described in the Sample Code.

Expected behavior:

Function mapping should work as described in the Sample Code.

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Blocking

Products/sites affected: (if applicable)

I am talking about below sample code.

And the error I am facing in VS Code:

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.