How to pass props in child component in react native with typescript

I have a parent component:

const [OTPNotify, setOTPNotify] = useState("flex");const closeOTPNotify = () => {  setOTPNotify("none");}<OTPRibbonComponent onCancel={closeOTPNotify} display={OTPNotify}/>

My Child Component:

export interface OTPNotifyComponentProps {    onCancel?: any;    display?: string,}const OTPRibbonComponent = (props: OTPNotifyComponentProps) => {    const {onCancel} = props;    const display = props.display;    return (<><LinearGradient style={[styles.linearGradient, {display: display}]}><Text>                    Please Complete OTP Process</Text><TouchableOpacity onPress={onCancel}><Icon name={'close-box-outline'} size={22} color={Colors.textDark} style={styles.iconStyle}/></TouchableOpacity></LinearGradient></>    )}

I want my child component to change its display from flexto none, when I click on the Icon.

But I am getting error at {display: display}

Error:

No overload matches this call.  Overload 1 of 2, '(props: LinearGradientProps | Readonly<LinearGradientProps>): LinearGradient', gave the following error.    Type '{ display: string | undefined; }' is not assignable to type 'ViewStyle | Falsy | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle>> | readonly (ViewStyle | ... 1 more ... | RegisteredStyle<...>)[]'.      Types of property 'display' are incompatible.        Type 'string | undefined' is not assignable to type '"none" | "flex" | undefined'.          Type 'string' is not assignable to type '"none" | "flex" | undefined'.  Overload 2 of 2, '(props: LinearGradientProps, context: any): LinearGradient', gave the following error.    Type '{ display: string | undefined; }' is not assignable to type 'ViewStyle | Falsy | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle>> | readonly (ViewStyle | ... 1 more ... | RegisteredStyle<...>)[]'.      Types of property 'display' are incompatible.        Type 'string | undefined' is not assignable to type '"none" | "flex" | undefined'.ts(2769)const display: string | undefined  Types of property 'display' are incompatible.    Type 'string | undefined' is not assignable to type '"none" | "flex" | undefined'.

I am very new to using react native using typescript, and I am not able to figure out what I am doing wrong. Please help me.