I want to encapsulate a component in the React mini program to implement functional calls, but I cannot pass values to it

Question

const MyToast = (children) => {
  console.log(" ~ file: index.js:6 ~ MyToast ~ children:", children.childrn)
  return (
    <Toast
      content={children.children}
      visible={visible}
      data-index={6}
      type="loading"
      onClose={handleCloseToast}
      showMask={true}
      duration={6000}
      maskCloseable={true}
    />
  );
};


export default MyToast;


Above is what I encapsulated



import MyToast from '@/components/Toast/index';

const handleCl=()=> {
    console.log(" ~ file: index.js:23 ~ handleCl:")
    const message = '警告信息';
    return (<div>
    <MyToast children={message}></MyToast>
    </div>)
  }

I want to encapsulate a component in the React mini program to implement functional calls, but I cannot pass values to it. How can I pass values to this component within a function method on another page？If called here, values can be passed ，

return (
    <View className="page-todos">

        <MyToast children={message}></MyToast>

      <Button onClick={handleCl}>Pass</Button>
     
    </View>
  );