In my component, I receive props of styles, like this:

export const NavBox = styled.div<{ open: boolean }>`
  display: flex;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
  @media (max-width: 768px) {
    flex-direction: column;
    position: fixed;
    width: 100%;
    justify-content: flex-start;
    background-color: var(--color);
    transition: all 0.3s ease-in;
    top: 10.3vh;
    padding-top: 10vh;
    left: ${(props) => (props.open ? '-100%' : '0')};
  }
`

And in Header, I receive this error about types:

Property 'navbarOpen' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; },

Property 'open' is missing in type '{ children: Element; }' but required in type 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes> & { ...; } & { ...; }, never> & Partial<...>, "theme">'.

This is the code:

const Header = () => {
  const [navbarOpen, setNavbarOpen] = React.useState<boolean>(false)
  return (
    <S.HeaderWrapper>
      <S.NavWrapper>
        <S.Toggle
          navbarOpen={navbarOpen}
          onClick={() => setNavbarOpen(!navbarOpen)}
        >
          {navbarOpen ? <S.Hamburger open /> : <S.Hamburger />}
        </S.Toggle>
        {navbarOpen ? (
          <S.NavBox>
            <NavBar />
          </S.NavBox>
        ) : (
          <S.NavBox open>
            <NavBar />
          </S.NavBox>
        )}
      </S.NavWrapper>
    </S.HeaderWrapper>
  )
}

Anyone can help me with this problem? Thanks for any help!