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

I have the folowing part of code:

private rootRef = React.createRef<HTMLDivElement>();

const target = (  
        <div>
             <Icon design='accepted' size='xl' />    
        </div>
);

return (
            <React.Fragment>
                {React.cloneElement(target, {
                    ref: this.rootRef,
                    onMouseOver: this.handleMouseOver,
                    onMouseLeave: this.handleMouseLeave,
                })}
                {open && this.renderTooltip()}
            </React.Fragment>
        );

When target with div element (or any other instead of div) everything is ok, but when target is:

const target = (  
        
             <Icon design='accepted' size='xl' />    
       
);

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

Icon is a span element inside of which is svg.

I will be very appreciate for any help.

Es wird keine Repository-Datei, kein Test und keine Dokumentationsseite genannt. Beginnen Sie damit, das in der Reproduktion gezeigte Verhalten von React.cloneElement und ref zu überprüfen, und ermitteln Sie anschließend, ob eine bestehende react.dev-Seite einer Klarstellung bedarf. Die Aufgabe wäre abgeschlossen, wenn eine klar abgegrenzte Dokumentationsänderung und eine Möglichkeit zur Überprüfung der aktualisierten Hinweise vorhanden sind.