What is the correct way to extend MUI v5 component with additional components and styled utility? - material-ui

Question

What is the correct way to extend build-in components of MaterialUI v5? What I'd like to do:
Style the build-in component
Make a wrapper on top of my styled component with additional components
The current code:
import {Box, Link, LinkProps} from '#mui/material';
import {styled} from '#mui/material/styles';
const StyledLink = styled(Link)<LinkProps>({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
color: '#6b7688',
fontWeight: 500,
fontSize: '12.8px',
textTransform: 'uppercase',
textDecoration: 'none',
'&:hover, &.Mui-focusVisible': {
color: '#313bac',
transition: 'all 0.3s ease-in-out',
// LinkHoverElement
'& .MuiBox-root': {
backgroundColor: '#313bac',
},
},
});
const LinkHoverElement = styled(Box)({
width: '5px',
height: '5px',
marginBottom: '5px',
borderRadius: '50%',
backgroundColor: 'transparent',
});
const MenuLink = ({children, ...restProps}: LinkProps) => {
return (
<StyledLink {...restProps}>
<LinkHoverElement />
{children}
</StyledLink>
);
};
export default MenuLink;
It works, I also may use all props ('sx' prop as well)
<MenuLink
sx={{mx: '1rem'}}
key={page}
href={`#${page}`}>
{page}
</MenuLink>
seems like a 'god object', I've read documentation and uses this articles:
Reusable component
styled()
but haven't found an complicated example and feel like the code above isn't a best practice
The codesandbox example