Resolve inconsistencies when forwarding components

Describe the issue. What is the expected and unexpected behavior?

Sometimes as a user you want to be able to pass in your custom component to render instead of the default element. However the API around this varies wildly per component. For example, these are some components we use in our application that need React Router's Link component:

Button

{/* @ts-ignore */}
<Button component={Link} to={toNewClientScope({ realm })}>
  {t("createClientScope")}
</Button>

DropdownItem

<DropdownItem
  component={<Link to={toDashboard({ realm })}>{t("realmInfo")}</Link>}
/>

BreadcrumbItem

<BreadcrumbItem
  render={(props) => (
    <Link {...props} to={toRealmSettings({ realm, tab: "keys" })}>
      {t("keys")}
    </Link>
  )}
/>

As you can see there are already three different ways of forwarding a component to render, and some of them are not able to be written in a type-safe manner.

The expected behavior here would be that this is a single and consistent API that is completely type-safe. For example, Styled Components has a as prop which is made type-safe by the definitions and allows the props to be forwarded and type-checked as well:

import styled from 'styled-components'

const Button = styled.button`
  background-color: hotpink;
`

<Button component={Link} to={toNewClientScope({ realm })}>
  {t("createClientScope")}
</Button>

Compara las API de forwarding y el comportamiento de TypeScript de Button, DropdownItem y BreadcrumbItem, usando como referencia las definiciones de tipos de styled-components enlazadas en el issue. El trabajo estará completo cuando estos componentes expongan una forma coherente y type-safe de reenviar un componente personalizado y sus props.