Typescript complications with string unions

I'm trying to create a function that returns JSX depending on the name prop.Here's my code:

function TabBarIcon(props: {  name:    | React.ComponentProps<typeof Ionicons>['name'] // 'key' | 'item' | 2000 more...    | React.ComponentProps<typeof Feather>['name']; // 2000 different strings...  color: string;  type: 'Ionicons' | 'Feather';}) {  if (props.type === 'Ionicons')    return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;  else if (props.type === 'Feather')    return <Feather size={30} style={{ marginBottom: -3 }} {...props} />;  else return <View />;}

TypeScript throws an error because it can't be sure the <Ionicons /> and <Feather /> components contain name. I've attempted to workaround this with props.type, but TypeScript still throws an error. How can I return the correct component without the error? Thanks!