tengo este componente

 import React, { FunctionComponent, useEffect } from 'react'; import shouldForwardProp from '@styled-system/should-forward-prop'; import styled from 'styled-components'; const delay = 0.25; interface FadeInSectionProps { offset?: number; children: React.ReactNode; } const Section = styled.div.withConfig({ shouldForwardProp, })<{ offset?: number }>` transition: 0.5s ease-in-out opacity, 0.5s ease-in-out transform; opacity: 0; transform: translate(0, -40px); &.fade-in-section--is-visible { opacity: 1; transform: translate(0, 0); } transition-delay: ${(props) => (props.offset ? props.offset * delay + 's' : '0s')}; `; export const FadeInSection: FunctionComponent = ({ offset, children }: FadeInSectionProps) => { const [isVisible, setVisible] = React.useState(false); const domRef = React.useRef(); useEffect(() => { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setVisible(true); } }); }); observer.observe(domRef.current); }, []); return ( <Section className={`fade-in-section ${isVisible ? 'fade-in-section--is-visible' : ''}`} ref={domRef} offset={offset} > {children} </Section> ); }; export default FadeInSection;

Que estoy usando (después de importarlo) así:

 <FadeInSection> <Header /> <FadeInSection>

o

 <div> <FadeInSection> <Item1 /> </FadeInSection> <FadeInSection offset={1}> <Item1 /> </FadeInSection> </div>

Pero cuando paso el desplazamiento de prop, aparece este error ts (incluso eso funciona como esperaba)

en ingles:

 Type '{ type: string; name: string; value: string; onChange: (e: any) => void; placeholder: string; label: string; }' is not assignable to type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'. Property 'type' does not exist on type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.ts(2322)

¿Qué estoy haciendo mal? ¿O cómo puedo deshacerme de este error?