I want to implement the Toast messages component. I have seen a few tutorials on that, but I don't quite understand how they add messages to the Toaster. I know how to do it with Redux or Context API, but is it possible without any of them? Most of these tutorials don't use them.

In my Toaster.jsx, I could do:

const Toaster = () => {
    const [toasts, setToasts] = useState([]);

    return (
        <ul>
            {toasts.map(({ id, message }) => (
                <Toast
                    key={id}
                    message={message}
                />
            ))}
        </ul>
    );
};

export default Toaster;

And then in some other component, I'd like to simply add toasts like this:

<button onClick={() => toast('Hello, world!')}>
    Display toast
</button>

What are the possible ways to communicate with the Toaster to make it add a message to its list of messages? Is it possible without wrapping any extra component on my App?