How to design Chakra UI useToast by myself?

Question

I'm learning and using Chakra UI. Chakra UI provides a hook useToast to show a toast in the web page. It also provides a component AlertDialog, which can show a dialog in the center. I want to create a hook like useAlertDialog that can raise a dialog like this:

const dialog = useAlertDialog({ some options ... });

return (
  <Button onClick={dialog}>Open the dialog</Button>
)

I tried to use ReactDOM.createPortal, but it did not work. I did some research, and the reason seems to be that the component I create in createPortal still has to be inserted in the node tree. Then I tried to understand how Chakra UI implements the function, but I didn't find the source code. All I know is that it uses provider and context hook.

Can anyone tell me how to implement useAlertDialog hook, or how Chakra UI implements useToast hook? I do NOT want to insert any component to the node tree manually.

P.S. It would be nice if I can specify a callback function called when the dialog is closed.