How do I avoid 'Function components cannot be given refs' when using react-router-dom? : <p>I have the following (using Material UI)....</p>

<pre><code>import React from "react";
import { NavLink } from "react-router-dom";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
function LinkTab(link){
    return &lt;Tab component={NavLink}
        to={link.link}
        label={link.label}
        value={link.link}
        key={link.link}
    /&gt;;
}
</code></pre>

<p>In the new versions this causes the following warning...</p>

<blockquote>
  <p>Warning: Function components cannot be given refs. Attempts to access
  this ref will fail. Did you mean to use React.forwardRef()?</p>
  
  <p>Check the render method of <code>ForwardRef</code>.
      in NavLink (created by ForwardRef)</p>
</blockquote>

<p>I tried changing to...</p>

<pre><code>function LinkTab(link){
    // See https://material-ui.com/guides/composition/#caveat-with-refs
    const MyLink = React.forwardRef((props, ref) =&gt; &lt;NavLink {...props} ref={ref} /&gt;);
    return &lt;Tab component={MyLink}
        to={link.link}
        label={link.label}
        value={link.link}
        key={link.link}
    /&gt;;
}
</code></pre>

<p>But I still get the warning. How do I resolve this issue?</p>
