I am using React, Material UI with styled-components.
Could you please help me to adjust that? forwardedAs doesn't work.

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>

Button.jsx

import { StyledButton } from './Button.style';

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

Button.style.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;
    }
`;