از دست دادن خودکار فوکوس بعد از کلیک کردن

سلام دوستان :)
وقتتون بخیر و خسته نباشید
من یک styled-component دارم که لینک هست و با focus: برای وقتی که کاربر روش کلیک میکنه یک سری استایل قرار دادم. حالا مشکل اینجاست که وقتی کاربر روی لینک کلیک میکنه استایل‌ها اعمال می‌شوند ولی بعد از اینکه کاربر دستش رو از روی دکمه موس برداشت، فوکوس روی لینک از بین نمی‌ره و اون استایل‌ها روی لینک میمونن و دفعه بعد که کاربر بخواد کلیک کنه، اون انیمیشن مورد نظر اجرا نمیشه چون استایل ها از قبل اعمال شدن. ممنون میشم راهنمایی کنید.
کد component:
‍‍‍

import styled from "styled-components";
import { NavLink } from "react-router-dom";
const StyledNavLink = styled(NavLink)`
  width: fit-content;
  padding: 1rem 1.5rem;
  font-size: 2rem;
  text-decoration: none;
  color: black;
  z-index: 1;
  border-radius: 0.7rem;
  transition: all 0.3s ease-out;
  position: absolute;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateY(0) scale(1);
  box-shadow: 0 0.4rem 0.2rem transparent;

  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0.75;
    z-index: -1;
    border-radius: 0.7rem;
    backface-visibility: hidden;

    background: linear-gradient(to top right, #2ecc71, #18dcff);
    transition: all 0.3s ease-out;
  }
  &:hover {
    &::before {
      top: 0;
    }
    transform: translateY(-1rem) scale(1.15);
    box-shadow: 0 0.4rem 0.2rem grey;
    &:focus {
      transform: translateY(-0.4rem) scale(1.1);
      box-shadow: 0 0.3rem 0.15rem grey;
      &::before {
        opacity: 0.9;
      }
    }
  }
`;

export default StyledNavLink;

کدهای مربوط به فوکوس رو خارج از بخش hover:& هم گذاشتم و باز هم درست کار نمی‌کرد.