Material-ui: Typescript ForwardRef / No overload matches this call

[seandearnaley]

• [x ] The issue is present in the latest release.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I am following the composition guide on https://material-ui.com/guides/composition/ to adapt a list link to a router, I'm trying to follow the instructions and make it work with typescript but the component property is throwing errors, spent a few hours on it and I cannot work out what is causing the issue.

Expected Behavior 🤔

The component property should not throw errors, unexplained "No Overload Matches This Call".

Steps to Reproduce 🕹

https://codesandbox.io/s/create-react-app-with-typescript-orwte?fontsize=14&hidenavigation=1&theme=dark

Steps:

If you look at this function, the component property on ' is throwing an error:

function ListItemLink(props: ListItemLinkProps) {
  const { primary, to } = props;

  const renderLink = React.useMemo(
    () =>
      React.forwardRef(function f(linkProps) {
        return <Link to={to} {...linkProps} />;
      }),
    [to]
  );

  return (
    <li>
      <ListItem component={renderLink}>
        <ListItemText primary={primary} />
      </ListItem>
    </li>
  );
}

Context 🔦

Would like to use react-router with typescript and material UI in a performant relatively type safe manner.

Your Environment 🌎

Windows WSL2 Ubuntu Node10

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.7.0 |
| React | 16.12 |
| Browser | |
| TypeScript | 3.7.2 |
| etc. | |

[joshwooding]

Your codesandbox is broken:

You aren't using the ref argument for React.forwardRef
You are using Link outside of a router

[seandearnaley]

@joshwooding so I have tried with the ref and without, I just updated that code pen and I'm getting the same error, and actually adding ref adds the error there, I may be messing this up somehow but this is what I have:

```

function ListItemLink(props: ListItemLinkProps) {
const { primary, to } = props;

const renderLink = React.useMemo(
() =>
React.forwardRef(function f(linkProps, ref) {
return ;
}),
[to]
);

return (

);
}```

[joshwooding]

@seandearnaley Have you added the Router too?

[seandearnaley]

@joshwooding yes, just added to the pen to be sure, note the pen seems to run without error but there are these typescript errors underlined in red for the ref and component,..

thanks for helping out, I really appreciate it

[joshwooding]

@seandearnaley Ill have to download the codesandbox to test it so I’ll do it tomorrow if no one beats me to it!

[merceyz]

The main issue is that you're not providing any type arguments to React.forwardRef.
Here is a working example https://codesandbox.io/s/create-react-app-with-typescript-ojoyh

[seandearnaley]

@merceyz that worked great! thank you so much