Why, even after specifying a type parameter for a React component, the linter still complains about '' missing in props validation?

Please consider the following TypeScript (.tsx) code:

import React from 'react';import { TextInputProps } from 'react-native';import { Container, TextInput, Icon } from './styles';interface InputProps extends TextInputProps {  name: string;  icon: string;}const Input: React.FC<InputProps> = ({ name, icon, ...props }) => (<Container><Icon name={icon} size={20} color="#666360" /><TextInput      keyboardAppearance="dark"      placeholderTextColor="#666360"      {...props}    /></Container>);export default Input;

By passing TextInputProps as a type parameter to React.FC I have access to the TextInput properties, which I'm destructuring in ...props. But I also need name and icon for other purposes, so I created an interface extending TextInputProps, specified these properties there, and passed InputProps to React.FC instead.

Now I get 'name' is missing in props validation - eslintreact/prop-types (same for 'icon'), but this didn't happen when I tried to get any of the properties specified inside TextInputProps.

Writing const Input: React.FC<InputProps> = ({ name, icon, ...props }: InputProps) => (/*...*/); makes the linter stop complaining, but I still don't get why using the type parameter doesn't. Can someone clarify this to me? Am I getting some concept wrong, or is it just a problem with the linter?

PS: I'm writing this on VS Code with ESLint extension.

PS2: This is the code inside styles.ts, if it may help:

import styled from 'styled-components/native';import FeatherIcon from 'react-native-vector-icons/Feather';export const Container = styled.View`  /* Some CSS */`;export const TextInput = styled.TextInput`  /* More CSS */`;export const Icon = styled(FeatherIcon)`  /* ... and CSS */`;