Расширение стилей компонента (задача a link href)

Как можно с помощью расширений стиля изменить компонент?

import ReactDOM from 'react-dom/client';
import styled from "styled-components";


type AspectPropsType = {
    children: string
    href?: string
};

 const StyledAspect = styled.button<sc-aspectPropsType>`
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
    color: #11be5f;
`

 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
    <div className="App">
        <StyledAspect>CookieButton</StyledAspect>

        <StyledAspect  XXX="YYY" ZZZ="#">CookieLink</StyledAspect>
    </div>
);


// Что должно быть вместо XXX, YYY и ZZZ, чтобы этот же стилизованный компонент отрисовался как ссылка (тег <a>)?
// ❗ В ответе укажите значения через пробел: XXX YYY ZZZ