En mi componente, recibo accesorios de estilos, como este:

 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')}; } `

Y en el encabezado, recibo este error sobre los tipos:

La propiedad 'navbarOpen' no existe en el tipo 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | clave de atributos HTML<...>> & { ...; },

Falta la propiedad 'open' en el tipo '{ children: Element; }' pero requerido en el tipo 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | clave de atributos HTML> & { ...; } & {...; }, nunca> & Parcial<...>, "tema">'.

Este es el código:

 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> ) }

Alguien me puede ayudar con este problema? ¡Gracias por cualquier ayuda!