Converting Class based js component to typescript component with dynamic props destructuring

I have a class based component like this

class ArInput extends React.Component {  render() {    const { shadowless, success, error } = this.props;    const inputStyles = [      styles.input,      !shadowless && styles.shadow,      success && styles.success,      error && styles.error,      {...this.props.style}    ];    return (<Input        placeholder="write something here"        placeholderTextColor={argonTheme.COLORS.MUTED}        style={inputStyles}        color={argonTheme.COLORS.HEADER}        iconContent={<Icon            size={14}            color={argonTheme.COLORS.ICON}            name="link"            family="AntDesign"          />        }        {...this.props}      />    );  }}

I'm trying to convert above class to functional based component with react hooks.This is the best I came up with in typescript

const ArInput =({ shadowless, success, error, style }:any)=> {    const inputStyles = [      styles.input,      !shadowless && styles.shadow,      success && styles.success,      error && styles.error,      {...style}    ];    return (<Input        placeholder="write something here"        placeholderTextColor={argonTheme.COLORS.MUTED}        style={inputStyles}        color={argonTheme.COLORS.HEADER}        iconContent={<Icon            size={14}            color={argonTheme.COLORS.ICON}            name="link"            family="AntDesign"          />    }    { ...shadowless, ...success, ...error, ...style }  />);

}

but I'm getting an error on this line { ...shadowless, ...success, ...error, ...style }

The error is Expression expected.ts(1109)

In javascript code this the respectful line is {...this.props}

How can I convert my javascript class to typescript ?

And am I correct with the way I converted this line {...this.props.style} in javascript code ?