title: Creating an object with hooks as property
body: <p><strong>Description:</strong> <br/>
  I am using Radix-UI and I want to create a service for creating toasts:
  <a href="https://www.radix-ui.com/docs/primitives/components/toast" rel="nofollow noreferrer">https://www.radix-ui.com/docs/primitives/components/toast</a></p>
  <p><strong>Problem:</strong><br/>
  I am unable to change the statte of the <code>open</code>-hook inside the object</p>
  <p><strong>How it works:</strong><br/></p>
  <ul>
  <li>Any random component from anywhere in the app can add toasts to the store</li>
  <li>The <code>Toastr.tsx</code> watches the store <code>toasts</code></li>
  <li>whenever a new object/ToastrItem is added it renders the toast</li>
  <li>After <em>5</em> seconds (default value) <code>onOpenChange</code>is called to set open=false through a hook. This does not work</li>
  </ul>
  <p><strong>Toastr.tsx</strong></p>
  <pre><code>const Toastr = () =&gt; {
      const { toasts, setToasts } = useToastrStore();
      const eventDateRef = React.useRef(new Date());
      const timerRef = React.useRef(0);
  
      React.useEffect(() =&gt; {
          console.log(toasts);
          return () =&gt; clearTimeout(timerRef.current);
      }, []);
  
      React.useEffect(() =&gt; {
          console.log('TOASTS:');
          console.log(toasts);
      }, [toasts]);
  
      return (
          &lt;ToastProvider swipeDirection='right'&gt;
              {toasts &amp;&amp;
                  toasts.length &gt; 0 &amp;&amp;
                  isArray(toasts) &amp;&amp;
                  toasts.map((toast: ToastrItem, idx: number) =&gt; {
                      return (
                          &lt;Toast
                              open={toast.open}
                              onOpenChange={(openStatus: boolean) =&gt; {
                                //This does not work
                                toast.setOpen(openStatus)
                              }}
                              key={idx}
                          &gt;
                              &lt;ToastTitle&gt;
                                  {toast.title}
                                  &lt;h1&gt;{toast.open}&lt;/h1&gt;
                              &lt;/ToastTitle&gt;
                              &lt;ToastDescription asChild&gt;
                                  &lt;time dateTime={eventDateRef.current.toISOString()}&gt;{'TEEEEEEEEEEEEEEEEEEEEEEEEEEXT'}&lt;/time&gt;
                              &lt;/ToastDescription&gt;
                              &lt;ToastAction asChild altText='Goto schedule to undo'&gt;
                                  &lt;Button variant='green' size='small'&gt;
                                      Close
                                  &lt;/Button&gt;
                              &lt;/ToastAction&gt;
                          &lt;/Toast&gt;
                      );
                  })}
              &lt;ToastViewport /&gt;
          &lt;/ToastProvider&gt;
      );
  };
  </code></pre>
  <p>The piece of code that does not work is:</p>
  <pre><code>                            onOpenChange={(openStatus: boolean) =&gt; {
                                //This does not work
                                toast.setOpen(openStatus)
                              }}
  </code></pre>
  <p>My theory is that it is because of the generator i am using:</p>
  <p><strong>getToast.tsx</strong></p>
  <pre><code>export const getToast = () =&gt; {
      const toast = new ToastObject() as ToastrItem;
      const [open, setOpen] = useState(false);
      toast.open = open;
      toast.setOpen = setOpen;
      return toast;
  };
  class ToastObject implements ToastrItem {
      id: string;
      title: string;
      description: string;
      variant: ToastrVariant;
      open: boolean;
      setOpen: (param: boolean) =&gt; void;
  
      constructor() {
          this.id = nanoid();
          this.title = 'test';
          this.description = 'description';
          this.variant = ToastrVariant.GOOD;
          this.open = true;
          this.setOpen = () =&gt; false;
      }
  }
  </code></pre>
  <p><strong>ToastrItem.tsx</strong></p>
  <pre><code>export interface ToastrItem {
      id: string;
      title: string;
      description: string;
      variant: ToastrVariant;
      open: boolean;
      setOpen: (parameter: boolean) =&gt; any;
  }
  </code></pre>