I have this component
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;
Which I'm using (after importing it) like so:
<FadeInSection>
<Header />
<FadeInSection>
or
<div>
<FadeInSection>
<Item1 />
</FadeInSection>
<FadeInSection offset={1}>
<Item1 />
</FadeInSection>
</div>
But when I pass the prop offset I get this ts error (even that works as I expected)

En english:
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)
What I'm doing wrong? Or how Can I get rid of this error?
try changing const FadeInSection: FunctionComponent = ({ offset, children }: FadeInSectionProps) to const FadeInSection: FunctionComponent<FadeInSectionProps> = ({ offset, children })
You type the component with FunctionComponent instead of props, so you can use internal props like children, without the need to type them. (you can actually remove children from your interface, cause it exists on FunctionComponent interface). What is happening is that you specify the type of const FadeInSection not the type of props, so when you used it previously, compiler didn't look into your interface at all
Like this the warning in the ide was gone and also the errors in the lint command
export const FadeInSection: FunctionComponent<FadeInSectionProps> = ({
offset,
children,
}: FadeInSectionProps) => {
return (<Section />);
}