Click the "dismiss/remove" button in the message component will make the duration not work later

[Levix0501]

'use client';

import toast from 'react-hot-toast';

export default function Home() {
  const onClick = () => {
    toast.custom(
      () => (
        <div className="bg-green-500">
          <p>Hello!</p>
          <button onClick={() => toast.remove()}>remove</button>
        </div>
      ),
      {
        duration: 3000,
      }
    );
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <button onClick={onClick}>make me a toast</button>
    </main>
  );
}

demo: https://stackblitz.com/edit/stackblitz-starters-4valsx?file=app%2Fpage.tsx

1. click the button "make me a toast"
2. click the remove button in the toast component
3. click the button "make me a toast"

and then the toast will not dismiss in 3000ms as it would be