Time tracking dashboard with React and TypeScript

I just completed a challenge, any feedback is welcome!

One of the challenges was to have the content of the cards being clickable while at the same time containing a button that shouldn't trigger the hover state of the whole card. To me clicking to that area would take you to some page that would contain a breakdown of that category. For that reason I think an anchor would be appropriate. But having a button inside the anchor is not semantically correct. For that reason I decided to make just the title (e.g. Work) an anchor element and make the whole area clickable using the redundant click event technique.

To avoid the button being hovered triggering the hover styles of the whole card I added mouseenter and mouseleave events handlers.

const handleButtonMouseEnter = () => {
  if (content.current) {
    content.current.style.backgroundColor = "hsl(235 46% 20%)";
  }
};

const handleButtonMouseLeave = () => {
  if (content.current) {
    content.current.removeAttribute("style");
  }
};

This could have been solved using the has selector but support is not enough at the moment, with it only implemented in Firefox under a flag. Anyway I included the necessary CSS to be able to remove the event listeners once support for has is sufficient:

.content:has(button:hover) {
  background-color: var(--color-blue-700);
}