Bug: When using `FontAwesomeIcon` as symbol, most features do not work

Bug description

When using FontAwesomeIcon component as symbol, most features do not work. For example rotation will do nothing to icons.

I think what would be needed, that we can use the FontAwesomeIcon component for the symbol definition, but also for the xlinkHref definition.

Something like:

<FontAwesomeIcon icon="eye" symbol="bla" />
<FontAwesomeIcon xlinkHref="bla" rotation={45} />

It could also be nice to have the styles being applied on the symbol, but i am not sure if this is technically possible and which way would make more sense.

Reproducible test case

https://codesandbox.io/s/angry-wildflower-bczuqj?file=/src/App.js

Screenshots

No response

Font Awesome version

v6.3.0

Serving

Self-hosted

Implementation

SVG+JS

Browser and Operating System

• Chrome Version 111.0.5563.64 on macOS 12.6.1

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate