Closing toast does not behave consistently in production and development environments

[haoxl3]

The functionality I want to implement is to display toast under the A page and automatically close toast when you leave the A page or click another button on the page. Now that I've implemented this feature, it works fine in the development environment, but when deployed to production, toast doesn't close after clicking the button on the page. Only if I add some waiting time, which I don't want to add. How can I close toast immediately?

A page code:

const { updateIsOpen } = useStore((state) => ({
    isOpen: state.isOpen, //default is true
    updateIsOpen: state.updateIsOpen,
  }));
const closeToast = async () => {
    if (toastIdsRef.current?.length) {
      const dismissPromises = toastIdsRef.current.map(
        (id) =>
          new Promise<void>((resolve) => {
            if (toastDisMiss.current) {
              toastDisMiss.current(id);
              resolve();
            }
          }),
      );

      //   // Wait for a short delay to ensure that the status is updated
      //   await new Promise((resolve) => setTimeout(resolve, 100));

      //   // Force all toast to be removed, without which the production environment occasionally fails to close toast
      //   toastIdsRef.current.forEach((id) => {
      //     dispatch({
      //       type: 'REMOVE_TOAST',
      //       toastId: id,
      //     });
      //   });

      //   // Wait another short delay to make sure the removal is complete
      //   await new Promise((resolve) => setTimeout(resolve, 100));

      toastIdsRef.current = [];
      await Promise.all(dismissPromises);
    }
  };

  useEffect(() => {
    const { id, dismiss } = toast({
      message: 'hello',
      open: isOpen,
      onOpenChange: (open) => handleClose(open),
      duration: Number.POSITIVE_INFINITY,
      closable: true,
    });
    toastIdsRef?.current?.push(id);
    toastDisMiss.current = dismiss;
  }, [isOpen]);

  useEffect(() => {
    const handleLocaleChange = async () => {
      // The toast notification is not displayed in the Chinese state
      if (locale === 'zh') {
        // await closeToast();
        updateIsOpen(false);
      } else if (locale === 'en') {
        updateIsOpen(true);
      }
    };

    handleLocaleChange();
    return () => {
      // Close toast after the component is uninstalled
      closeToast();
    };
  }, [locale]);

When I let go of the comments in the code, toast was closed properly in production.

How to reproduce

1. Set toast's open to true on the A page;
2. Click the locale button on the A page, and when its value changes to zh, set toast via store to false;
3. Click the locale button on the A page and set toast to true via store when its value changes to en;
4. When you leave page A, toast closes automatically;
5. In the second step toast should be closed, but it is sometimes closed and sometimes not

The build tool is rush.

chrome: 131.0.6778.265 (arm64)
"@radix-ui/react-toast": "~1.2.1",
"zustand": "~5.0.1",
"next": "14.2.13",
"node": "v18.20.5",