Using react-native-vector-icons throws TypeScript error: "TS2769: No overload matches this call"

[chinomnsoawazie]

Describe the bug

After upgrading my app to use react-native 0.69.1, all places where I used react-native-vector-icons (following this example) in my app now throws the error reproduced below;

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PickerSelectProps | Readonly<PickerSelectProps>): Picker', gave the following error.
     Type '() => JSX.Element' is not assignable to type 'ReactNode'.
 Overload 2 of 2, '(props: PickerSelectProps, context: any): Picker', gave the following error.
     Type '() => JSX.Element' is not assignable to type 'ReactNode'.
  XYZSelector.tsx(96, 16): Did you mean to call this expression?
  XYZSelector.tsx(96, 16): Did you mean to call this expression?

To Reproduce

Steps to reproduce the behavior:

1. Add RNPickerSelect to a component
2. Using the Icon prop, add an Icon like this const dropDownIcon = () => { return <Icon name="ios-chevron-down" size={20} />; };
3. See error

Expected behavior

Using Icon as contained in the readme should not throw a type error. It was not throwing this error until I upgraded my react-native version to 0.69.1.
Screenshots

Additional details

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• react-native-picker-select version: [8.0.4]

Interestingly, this version (which came with a yarn add react-native-picker-select to upgrade the package) is missing from the releases list: latest release is 8.0.3 Screenshot from my package.json 👇🏿

• react-native version: [e.g. 0.69.1]
• N/B: The package still works and I squelched the warning with //eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore, however, that is not ideal as this probably points to a larger problem

Reproduction and/or code sample

Can't adequately reproduce this with an expo snack as: my project uses TypeScript and hence my root component is App.tsx as opposed to their more type-permissive JavaScript based App.js.