Un Outline qui n'est pas un outline ……

Bonjour,

Je code actuelement un site en React et je rencontre un probleme avec la conception d'un bouton.
Quand je passe la souris dessus, il y a une sorte de outline qui s'affiche or dans monde code (meme dans le reset.css) j'ai mis "outline:none". Quelqu'un pourrait m'aider ? je suis desespérer 😭😭
Voici mon code :

import styled from 'styled-components';

function MainDiv() {

const PlayButton2 = styled.button`
   position: relative;
  top: 20vh;
  background: linear-gradient(145deg, #f26425, #f78a48);
  color: white;
  height: 10vh;
  width: clamp(150px, 15vw, 250px);
  border: 4px solid #051d36;
  border-radius: 40px;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: bold;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: 6px 6px 0 #051d36;
  transition: all 0.2s ease-in-out;

  &:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 #051d36;
    background: linear-gradient(145deg, #f78a48, #f26425);
  }

  &:active {
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 #051d36;
  }

  `;
  return (
    <>
      <PlayButton2>JOUER</PlayButton2>
    </>
  );
}

export default MainDiv;