how to use react-native-root-toast as component in typescript

I am working on React Native project with Typescript, and want to create react-native-root-toast as a component, here's my component code:

import React, { memo, useEffect, useState } from "react";import Toast from "react-native-root-toast";interface Props {  message: string;  shadow?: boolean;  textColor?: string;}const Component = ({ message, shadow, textColor }: Props) => {  const [visible, setVisible] = useState(false);  useEffect(() => {    setTimeout(() => setVisible(true), 100);    setTimeout(() => setVisible(false), 5000);  }, []);  return (<Toast      visible={visible}      position={105}      textColor={textColor || "black"}      shadow={shadow}      animation={false}      hideOnPress>      {message}</Toast>  );};Component.defaultProps = {  shadow: true,};export default memo(Component);

and this is how i call the component

const _btnAction = () => {    return (<Toast        message={`${product.name} (${product.colorname}, ${findSizeName(          form.size        )}, ${form.qty}pcs) has been added to your cart.`}      />    );  };.........<Button onPress={_btnAction} />

but it's not working, what is the proper way to create react-native-root-toast as a component in Typescript??

Cheers!