How to use react-router-dom's `<Link>` with `Anchor`

[woven wren]

I want to use https://reactrouter.com/en/main/components/link#link for client side routing, but I want the styles of https://mantine.dev/core/anchor/, how can I achieve this?

I tried this:

<Link to={`/Home`} key={"/Home"} className='link'><Anchor>Home</Anchor></Link>

and removing all the styles from the .link class.

but then I got the warning:

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

[stone lagoon]

you can use the polymorphic way

<Anchor component={Link} to={"/Home"}>
  Home
</Anchor>

https://mantine.dev/guides/polymorphic/#polymorphic-components-as-other-react-components

[woven wren]

ahh, now I understand the purpose of that polymorphic thing

thanks