[TypeScript] Paper with component=Link

I might be doing something wrong, but I cannot use component Link with Paper.

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

Current Behavior 😯

Getting the following exception:

Type '(props: LinkRouter) => JSX.Element' is not assignable to type '"object" | "meter" | "textarea" | "button" | "style" | "progress" | "ruby" | "table" | "small" | "sub" | "embed" | "pre" | "caption" | "menu" | "menuitem" | "a" | "abbr" | "address" | ... 101 more ... | undefined'.
  Type '(props: LinkRouter) => JSX.Element' is not assignable to type 'FunctionComponent<HTMLAttributes<HTMLElement>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'PropsWithChildren<HTMLAttributes<HTMLElement>>' is not assignable to type 'LinkRouter'.
        Property 'to' is missing in type 'HTMLAttributes<HTMLElement> & { children?: ReactNode; }' but required in type 'LinkProps<PoorMansUnknown>'.

Expected Behavior 🤔

I should be able to use any component with Paper.

Steps to Reproduce 🕹

Steps:

import React from "react";
import {Link as RouterLink, LinkProps as RouterLinkProps} from "react-router-dom";
import Link, {LinkProps} from "@material-ui/core/Link";
import Paper from "@material-ui/core/Paper";

type LinkRouter = RouterLinkProps & Omit<LinkProps, "component">

const LinkRouter = (props: LinkRouter) => <Link underline="none" component={RouterLink} {...props}/>

export default () => (
    <Paper component={LinkRouter} to="/page">Link</Paper>
)

It works as expected if I use Avatar instead.

Context 🔦

I’d like to keep classes and options from paper but use a link. It works fine without TypeScript…

Your Environment 🌎

Tech	Version
Material-UI	v4.9.14
React	v16.13.1
Browser	Chrome
TypeScript	3.9.3

[saiki4116]

@oliviertassinari I am picking this up

[cyrilchapon]

I’m encountering

Property ‘noValidate’ does not exist on type ‘IntrinsicAttributes & BoxProps & { children?: ReactNode; }’.

With a <Box component='form' noValidate />

Is that same underlying issue ? Or should I reopen separately ? @eps1lon @oliviertassinari

EDIT: For now, using kinda same hack

import { FunctionComponent, FormHTMLAttributes } from 'react'
import { Box, BoxProps } from '@material-ui/core'

type FormBoxProps = BoxProps & FormHTMLAttributes<HTMLFormElement>

export const FormBox: FunctionComponent<FormBoxProps> = (props) => (
  <Box {...props} component='form' />
)