Description

When using the <Tooltip> component with an <Icon> as its only child is rendered it throws an error for passing ref to the component child.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Wrapping the <Icon> with a simple <span> resolves the error.

Even with the error it still renders properly and continue working from what I can tell.

Step-by-step reproduction instructions

<Tooltip text="Some Text">
	<Icon
		className="control-icon"
		onClick={ () => {} }
		icon='hidden'
	/>
</Tooltip>

Add <span> to resolve it.

<Tooltip text="Some Text">
	<span>
		<Icon
			className="control-icon"
			onClick={ () => {} }
			icon='hidden'
		/>
	</span>
</Tooltip>

Screenshots, screen recording, code snippet

Environment info

• @wordress/env latest, after wp-env start --update, with gutenberg latest (not trunk) installed.

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