[Duda] ERROR

Me sale este error y estoy siguiendo el pasao a paso del educador

https://reactjs.org/link/switch-to-createroot
▲ styled-components: it looks like Styled Component.ts:139 an unknown prop "primary" is being
sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager should Forward Prop={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props ($ prefix for automatic filtering.)
►Warning: Received `true` for react-dom.development.js:86 a non-boolean attribute
`primary`.
If you want to write it to the DOM, pass a string instead: primary="true" or primary={value.toString()}-
at a
at 0 (http://localhost:3000/static/js/bundle.js:39174:6) at div
at nav
at 0 (http://localhost:3000/static/js/bundle.js:39174:6) at Header
at App

dejo el codigo, pero no se por que me esta saliedo eso

import React from "react";
import styled from "styled-components"
import logo from "../../assets/images/logo.svg";
import { colorPrimario } from "../UI/variable";

const StyledHeader = styled.nav`
  background-color: ${colorPrimario};
  display: flex;
  justify-content: space-between;
  padding: 0 15vw;
  height: 10vh;
  align-items: center;

`

const Logo = styled.img`
 height: 50px;
  width: 50px;
`

const BtnHeader = styled.a`
  text-align: center;
  border-radius: 3px;
  padding: 5px 20px;
  margin: 0 10px;
  font-weight: 600;
  border: 2px solid white;
  color: ${ (props) => props.primary ? "white"  : colorPrimario };
  background: ${ (props) => !props.primary ? "transparente" : "white" };
`

const Header = () => {
  return (
    <StyledHeader >
      <Logo src={logo} alt="Logo Smart Bank" />
      <div>
        <BtnHeader href="https://google.com">
          Ayuda
        </BtnHeader>
        <BtnHeader primary  href="https://google.com">
          Salir
        </BtnHeader>
      </div>
    </StyledHeader >
  );
};

export default Header;