How to fix findDOMNode warning from MaterialUI tooltip

Question

i've looked at a number of solutions on StackOverflow for getting rid of the findDOMNode warning. Also https://material-ui.com/components/tooltips andhttps://material-ui.com/guides/composition/#wrapping-components . Nothing is working. The MaterialUI warning happens when I roll over an item with a tooltip.

ERROR
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: react-strict-mode-find-node
in div (created by Transition)
in Transition (created by ForwardRef(Grow))
in ForwardRef(Grow) (created by ForwardRef(Popper))
in div (created by ForwardRef(Popper))
in ForwardRef(Portal) (created by ForwardRef(Popper))
in ForwardRef(Popper) (created by ForwardRef(Tooltip))
in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
in WithStyles(ForwardRef(Tooltip)) (at UserNameTemplate.jsx:36)

Here is my latest code attempt

PARENT
const tipRef = useRef();

return (
    <span className="truncate">
      <Link to={link}>
        <UserNameTemplate user={user} forwardedRef={tipRef}/>
      </Link>
    </span>
  
);

CHILD
const UserNameTemplate = ({ forwardedRef, ...props }) => {
...

return (
    <span ref={forwardedRef}>
        <Tooltip
            title={title}
            placement="top"
        >
            <span className={className}>
              {userName} {icon}
            </span>
        </Tooltip>
    </span>
   )
}

export default React.forwardRef((props, ref) => <UserNameTemplate {...props} forwardedRef={ref} />);

Answer 1

Try removing React.strictMode which will suppress the warning

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

could be changed to

ReactDOM.render(
    <App />,
    document.getElementById('root')
);