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.

Không có tệp nào trong repository, bài kiểm thử hay trang tài liệu nào được nêu tên. Hãy bắt đầu bằng việc xem xét hành vi của React.cloneElement và ref được thể hiện trong bản tái hiện, sau đó xác định xem một trang react.dev hiện có có cần được làm rõ hay không. Công việc được xem là hoàn tất khi có một thay đổi tài liệu với phạm vi rõ ràng và một cách để xác minh phần hướng dẫn đã được cập nhật.