title: How do I avoid 'Function components cannot be given refs' when using react-router-dom?
body: <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>