How to add a border color when Router Link is activated form the menu of menuitem in react with typescript and MUI (5.15.14)

Question

This is my button with Menu along with menu Items .

  <Button
        id="demo-customized-button"
        aria-controls={open ? 'demo-customized-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        variant="contained"
        disableElevation
        onClick={handleClick}
        endIcon={<KeyboardArrowDownIcon />}
      >
        setting 
      </Button>
      
      <Menu
        id="demo-customized-menu"
        MenuListProps={{
          'aria-labelledby': 'demo-customized-button',
        }}
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        <MenuItem  onclick={closehandle} component={routerLink} to="/">Home</MenuItem>
      />

Below is the routerLink component passing to menuitem

import {
  NavLink as RouterLink,
  NavLinkProps as RouterLinkProps,
} from 'react-router-dom';

const routerLink = React.forwardRef<HTMLAnchorElement, RouterLinkProps>((itemProps, ref) => 
   {
    return <RouterLink ref={ref} {...itemProps} role={"MenuItem"} />;
  },
);

When router link isActive(Home) then how to apply border color?