Menu.Item with <a> not behaving correctly (styles)

[axvemi]

I have a case where, if you click on an "a" tag, the background that shows when you hover on it stays.

In this case I have the following structure:

<DaisyNavBar className="sticky bg-base-100 top-0 shadow"> <DaisyNavBar.Center className="hidden lg:flex"> <Menu horizontal className="px-1"> <Menu.Item> <span> <Link to={routes.home} className={clsx({ "underline font-bold": pathname == routes.home })}>Inicio</Link> </span> </Menu.Item> </Menu> </DaisyNavBar.Center> </DaisyNavBar >

As you can see, there is a span there, since it fixes my problem. You can remove it and see the error. That Link component is from "react-router-dom", but it also happens if you use an a tag like this <a href="#">A link</a> It only happens inside the Menu.Item directly

It stays with that background color once clicked, and, it's only removed once you click outside of the item.