const SomeComponent = () => {
  ...
  const [$backdrop, setBackdropOpen] = useComponentState<boolean>(
    (isOpen, setOpen) => {
      /**
       * MUI Backdrop Component
       * @see https://mui.com/components/backdrop/#main-content
       */
      return (
        <Backdrop open={open} onClose={() => setOpen(false)}>
          <CircularProgress color="inherit" />
        </Backdrop>
      )
    }, 
    true
  );
  return (
    ...
    {$backdrop}
  )
}

const SomeComponent = () => {
  ...
  const [$dialog, setBackdropOpen] = useComponentState<{
    isOpen: boolean, content: string
  }>(
    ({ isOpen, content }, setState) => {
      /**
       * MUI Dialog Component
       * @see https://mui.com/components/dialogs/#main-content
       */
      const handleClose = () => {
        setState((state) => {
          return {
            ...state,
            isOpen: false
          }
        })
      }
      return (
        <Dialog open={open} onClose={handleClose}>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogContent>{content}</DialogContent>
        </Dialog>
      )
    }, 
    {
      isOpen: false,
      content: 'Dialog Content'
    }
  );
  ...
  return (
    ...
    {$dialog}
  )
}