Компонент React Link теряет css или magin align при использовании

У меня есть заголовок, в котором я использую сетку css, в одной из областей я нахожу 2 кнопки, которые центрируются с помощью «display: grid» в родительском и «margin: auto» в дочернем. Кнопки центрированы правильно - это 2 кнопки, но если я хочу добавить компонент Link и поместить кнопку внутрь, он больше не выглядит центрированным, но теряет выравнивание css, но сохраняет все свои стили исходной кнопки, это как если бы он потерял маржу.

Он должен быть выровнен по вертикали, но если я использую компонент Link, он выравнивается по верхнему краю.

Пытался добавить маржу к компоненту ссылки, но не смог это исправить.

    <div className="loginArea">
      <button type="button" className="botonComun">
        <FontAwesomeIcon icon={faUserPlus} /> Registro
      </button>
      <Link to="/login">
      <button type="button" className="botonComun">
        <FontAwesomeIcon icon={faSignInAlt} /> Entrar
      </button>
      </Link>
    </div>


  .loginArea {
    grid-area: loginArea;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: max-content max-content;
    grid-gap: 12px;
    padding-right: 25px;
    padding-left: 25px;
  }
}

Link {
  margin: auto;
  width: max-content;
  height: max-content;
}

.botonComun {
  border: 0;
  border-radius: 4px;
  background-color: $purpura;
  margin: auto;
  font-weight: 700;
  font-size: 0.7em;
  font-family: $fuenteprimaria;
  color: $blanco;
  padding: 12px 20px 12px 20px;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  cursor: pointer;

  &:hover {
    background-color: $azul;
  }
}

ИСПРАВИТЬ

Я забыл кнопку и просто стилизовал компонент Link с помощью класса кнопки