Возникает ошибка из-за атрибута "component" в стилизованном элементе MUI / React

Я пытаюсь создать стилизованный Button элемент из MUI, но у меня возникает проблема. Код компонента:

import { Button, styled } from '@mui/material';

const ButtonBase = styled(Button)(
    {
        display: "inline-flex",
        gap: "10px",
        backgroundColor: "#E9EDF0",
        borderRadius: "29px",
        boxShadow: [ "-3px -3px 7px #FFFFFF", "3px 3px 7px rgba(0, 0, 0, .2)" ].join(', '),
        font: "700 25px/58px 'Open Sans'",
        width: "fit-content",
        minWidth: "240px",
        height: "58px",
        lineHeight: "100%",
        color: "#215C75",
        padding: "0 30px",
        textTransform: "none",
        "&:hover": { backgroundColor: "#215C75", color: "#FFFFFF" }
    }
);

const ButtonOutline = styled(Button)(
    {
        display: "inline-flex",
        gap: "10px",
        backgroundColor: "#E9EDF0",
        border: "2px solid #215C75",
        borderRadius: "29px",
        font: "700 25px/58px 'Open Sans'",
        width: "fit-content",
        minWidth: "240px",
        height: "58px",
        lineHeight: "100%",
        color: "#215C75",
        padding: "0 30px",
        textTransform: "none",
        "&:hover": { backgroundColor: "#215C75", color: "#FFFFFF" }
    }
);

const CustomButton =
{
    Base: ButtonBase,
    Outline: ButtonOutline
};

export default CustomButton;

И тут я пытаюсь его применить, ошибка возникает из-за "component={Link}", почему? (Link от react-router-dom)

<CustomButton.Base
    component={Link}
    to={"/test"}
    sx={{ margin: "auto auto 0 auto" }}
>
    Do it again
</CustomButton.Base>