FlexItem doesn't render children when used "as" another component

[tellthemachines]

Description

When using a FlexItem "as" a component that is expected to have children, the children of that component may not get rendered. This happens because in the useContextSystem hook, finalComponentProps.children is set even if there is no value for it, so the component FlexItem is rendering "as" receives an empty children prop, which may override its own children.

I came across this issue while trying to use FlexItem "as" an Icon in #42309.

Step-by-step reproduction instructions

1. Try creating a FlexItem to render "as" an Icon, e.g. <FlexItem as={ Icon } icon={ positionCenter } />
2. Verify that the Icon content (in this case, the path inside the svg element) isn't rendered.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes