Why, even after specifying a type parameter for a React component, the linter still complains about '<property>' 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 */
`;