Next Js Limitation

[GI028]

When using react-hot-toast with Next.js App Router (React Server Components), passing a function as children to <Toaster /> (render-prop pattern) throws a runtime error:

Functions are not valid as a child of Client Components

This happens even when the component is marked with "use client".

<Toaster toastOptions={{ duration: 3000 }}>
{(t) => (

{({ icon, message }) => (
<>
{icon}
{message}
{t.type !== "loading" && (
<button onClick={() => toast.dismiss(t.id)}>X
)}
</>
)}

)}

may ne you can suggest an alternative, insted of using children, use an other props named renderer or something else.