Reusable React-Toastify Component

I’m trying to create a reusable Toast Component.

here is the code: https://codesandbox.io/s/custom-toastify-toast-with-react-component-forked-mu2l9c?file=/src/Toast.js:146-680

On rendering the Toast Component itself [commented below], the toast pops up beautifully.

return (
    <>
      {/* <Toast /> */}   ---> This one works perfectly.
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        name="input"
      />
    </>

However, I am trying to achieve calling of toast using exposed toastMeta . So that the caller can simply type toastMeta.message("please show up..") to get the Toast. Also passing an optional param horizontal and vertical position.

Note: This CustomToast will be a npm package, so the caller has to install this library and import the toastMeta.

export const toastMeta = {
  position: "top-right",
  message: "Error Toast"
};

export const Toast = ({ className, children, ...props }) => {
  return (
    <>
      <ToastContainer {...props}>
        {toast.error(toastMeta.message, {
          position: toastMeta.position,
          autoClose: 3000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "colored"
        })}
      </ToastContainer>
    </>
  );
};

Calling toast after every key stroke..

const [input, setInput] = useState("");

  useEffect(() => {
    toastMeta("Error Message..");
  }, [input]);

  return (
    <>
      {/* <Toast /> */}
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        name="input"
      />

Reason for creating a Toast Component:

For version control as its one of the component of the Common Library. The common library has all the UI elements.

Your help is highly appreciated. Thank you in advance.