title: react-router-dom v6 NavLink and MUI ListItem not working with className
body: <p>I have a problem using MUI with react-router-dom v6.</p>
  <pre><code>import ListItem from '@mui/material/ListItem';
  import { NavLink } from 'react-router-dom';
  </code></pre>
  <pre><code>&lt;List key={index}&gt;
    &lt;ListItem
       component={NavLink}
       sx={{
         color: '#8C8C8C',
       }}
       to={'/home'}
       className={({ isActive }) =&gt; (isActive ? classes.activeLink : undefined)
       &gt;
       &lt;ListItemIcon&gt;&lt;/ListItemIcon&gt;
     &lt;ListItemText primary='Home'/&gt;
   &lt;/ListItem&gt;
  &lt;/List&gt;
  </code></pre>
  <p><code>className</code> not working and show error:</p>
  <pre><code>No overload matches this call.
    The last overload gave the following error.
      Type '({ isActive }: { isActive: any; }) =&gt; boolean' is not assignable to type 'string'
  The expected type comes from property 'className' which is declared here on type 'IntrinsicAttributes &amp; { button?: false | undefined; } &amp; ListItemBaseProps &amp; { components?: { Root?: ElementType&lt;any&gt; | undefined; } | undefined; componentsProps?: { ...; } | undefined; } &amp; CommonProps &amp; Omit&lt;...&gt;'
  </code></pre>