Possible to use custom toasts from a custom component library in a separate project/app?

[25747]

I have an external component library where I've built and tested a custom toast function that works great. My function, called toastAlert gets called with the toast message and then calls toast.custom() in order to use a custom styled toast component. Basically I'm just abstracting the boilerplate of having to call toast.custom with a custom component every time i want it.

in my custom library:

import toast from 'react-hot-toast';
import CustomStyledToast from './';

export const toastAlert = (message) => {
  toast.custom((t) => {
    <CustomStyledToast t={t} message={message} />
  }
}

example of custom toast working in storybook:

It's perfect in my component library and storybook, but when I try to import my toastAlert function into my actual app, nothing happens on calling the function. (my storybook implementation is functionally identical to the App example below)

in my app:

import { Toaster } from 'react-hot-toast';
import toastAlert from 'custom-library';

const App = () => {
  return (
    <>
      <button onClick={() => toastAlert('custom toast message')>Click for toast</button>
      <Toaster />
    </>
  )
}

There are no errors or anything when I call toastAlert, simply nothing happens. If I import the standard toast function from react-hot-toast, the standard toasts work fine.

If I move all of my custom toastAlert code into my app files, it works perfectly, so there is something I don't understand that's getting in the way when trying to use a toast call from a separate component library/repo. Is what I'm trying to do possible, or is there some sort of 'binding' (for lack of a better word) between the toast function and the <Toaster /> component where they must be imported into the same project to work together?

this appears to be related to https://github.com/timolins/react-hot-toast/issues/108