Confusing Error:- Function components cannot have string refs. We recommend using useRef() instead

Question

Creating a ref via useRef():

export default function LexicalEditor() {
  const floatingAnchorElem = useRef(null);

  return(
      <LexicalComposer initialConfig={editorConfig} >
        <Container fluid >
          <LexicalToolbarPlugin />
          <Row className="justify-content-xl-center" id="editor-body" >
            <Col xs={7}>
              <div className="editor" ref={floatingAnchorElem}>
                <RichTextPlugin
                  contentEditable={
                    <ContentEditable className="editor-input" style={ { borderColor: 'green', borderStyle: 'solid', minWidth: '50%', width: 'auto', minHeight: 500, height: 'auto' }} />
                  }
                />
              </div>
            </Col>
            <LocalStoragePlugin />
            {floatingAnchorElem.current && (
              <>
                <FloatingLinkEditorPlugin anchorElem={floatingAnchorElem.current} />
              </>
              )
            }
          </Row>
        </Container>
      </LexicalComposer>
  )
}

and then inside FloatingLinkEditorPlugin, creating portal like so:

export function ZiFloatingLinkEditorPlugin(props){
  return(
    createPortal(
        <FloatingLinkEditor editor={activeEditor} anchorElem={props.anchorElem} />,
        props.anchorElem,
      )
)

However, getting this error:

Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref