[Feature]: Motion components allow ref forwarding via function

[YuanboXue-Amber]

Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

Allow below API from Motion components

const FadeEnter = createMotionComponent(options);
<FadeEnter>
  {(nodeRef) => <Input root={{ref: nodeRef}}} />
</FadeEnter>

Reason:
There are components in fluent v9 libraries that has primary slot, for example Input. When wrapping Motion components around Input, the primary slot input is animated, not the container root.
https://stackblitz.com/edit/z3cxg9yd?file=src%2Fexample.tsx - Animation is applied only on the input slot

Additional context

No response

Have you discussed this feature with our team

@ling1726 @layershifter

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Medium