Typescript chakra-ui <Tag> clickable and mouse events

I have to modify an existing component, or creating a new component, that is similar to the that I already have, that is a chakra-ui component named Tag Chakra-ui TAG component, except for the fact that is clickable, that means that:

• The element I am referring, has a link
• I have the event "onHover" that shows me a tooltip with the name of the element
• I have the event "onFocus or "Press" that change the color of the tag
• I have the event "onClick" that brings me to the url of the element

Here's the component that I have right now.

<Tag
    bgColor="gray.50"
    border="1px solid"
    borderColor="gray.400"
    fontSize="10px"
    p={1.5}
    size="sm"
 >
   {listElement?.name || 'Unnamed'}
</Tag>

If the question is not clear, let me know in the comments, and I will adjust.

const ClickableTag = ({ listElement }) => {
  const handleClick = () => {
    window.location.href = listElement.url;
  };

  return (
    <Tooltip label={listElement?.name || 'Unnamed'} aria-label="A tooltip">
      <Box
        as="button"
        onClick={handleClick}
        bgColor="gray.50"
        border="1px solid"
        borderColor="gray.400"
        fontSize="10px"
        p={1.5}
        size="sm"
        _hover={{ bgColor: 'gray.100' }}
        _focus={{ bgColor: 'gray.200' }}
        _active={{ bgColor: 'gray.300' }}
      >
        {listElement?.name || 'Unnamed'}
      </Box>
    </Tooltip>
  );
};

• The Tooltip component from Chakra-UI wraps the Box component to display a tooltip on hover.

• The Box component is used as a button with as="button". This makes it interactive and allows for various events like onClick, onHover, onFocus, and onPress. Styling is applied to change the background color on hover (_hover), focus (_focus), and active/press (_active) states. Handle Click:

• The handleClick function changes the window.location.href to navigate to the url of the listElement when the tag is clicked.