Estoy usando React , Material UI con styled-components .
¿Podría ayudarme a ajustar eso? forwardedAs como no funciona.

CoursesPage.style.js

 import styled from 'styled-components'; import { Button as ButtonComponent } from '../../components/Button/Button'; export const Button = styled(ButtonComponent)` text-decoration: none; `;

CoursesPage.jsx

 import { Link } from 'react-router-dom'; import { Button } from './CoursesPage.style'; <Button to='/courses/add' variant='outlined' size='small' forwardedAs={Link} > Add new course </Button>

Botón.jsx

 import { StyledButton } from './Button.style'; export const Button = (props) => ( <StyledButton {...props}>{props.children}</StyledButton> );

Botón.estilo.jsx

 import { styled } from '@mui/material/styles'; import MUIButton from '@mui/material/Button'; export const StyledButton = styled(MUIButton)` color: #000; border: 1px solid #474747; text-transform: initial; &:hover { background-color: #d0d0d0; border: 1px solid #474747; } `;