I've been trying to extend components like PaperTextInput.Icon or Tab.Navigator but have been failing and I'm wondering how am I supposed to extend them? What I'm trying to achieve is replace PaperTextInput.Icon with StyledInputIcon which extends PaperTextInput.Icon. Unfortunately, this doesn't seem to work.

const PasswordInput: FunctionComponent<Props> = ({
    label,
    value,
    error,
    toggleShowPassword,
    hideInput = true,
    ...rest
}) => {
    return (
        <TextInput
            label={label}
            value={value}
            mode="outlined"
            error={error}
            textContentType="password"
            secureTextEntry={hideInput}
            right={
                <PaperTextInput.Icon
                    style={styles.icon}
                    color={colors.primary600}
                    name={hideInput ? 'eye' : 'eye-off'}
                    accessibilityLabel={hideInput ? 'Show password' : 'Hide password'}
                    onPress={toggleShowPassword}
                />
            }
            {...rest}
        />
    );
};

const StyledInputIcon = styled(PaperTextInput.Icon)`
    margin-top: 15px;
    margin-right: 5px;
`;

export default PasswordInput;