User can't dismiss the first toast if animations are disabled

[zavvdev]

I'm solving some accessibility issues for client's website which uses this package. The website has accessibility plugin connected, where users with disabilities can tweak appearance as they want. One of the options is to disable animations. This option injects the next class

.offtransition * {
       animation: none !important;
}

which applies to the toast root with class="go2072408551". That root has it's own animation property which gets overwritten by plugin styles.

Also, I've added custom dismiss button for each toast. The issue is that when animations are turned off, user cannot dismiss the first toast. If there are >1 toasts - user can dismiss all except the first one. Obviously since appear/disappear animations are off so toasts appear/disappear instantly which is ok, but I can't understand why the first one can't be dismissed and why it even needs animation to be closed.

Exactly the same issue happens with react-toastify package which I uninstalled because of that. Any ideas why it happens or how it can be resolved manually at least?

Container.js

import { Toaster } from "react-hot-toast";

export var styles = {
  common: {
    padding: "16px",
    color: "#fff",
    fontWeight: "600",
  },
  success: {
    style: {
      background: "#4ac95b",
    },
    icon: null,
    iconTheme: {
      primary: "white",
      secondary: "#4ac95b",
    },
  },
  error: {
    style: {
      background: "#c65454",
    },
    icon: null,
    iconTheme: {
      primary: "white",
      secondary: "#c65454",
    },
  },
  warn: {
    style: {
      background: "#c68654",
    },
  },
};

export function UINotificationContainer() {
  return (
    <Toaster
      position="bottom-left"
      toastOptions={{
        style: styles.common,
        success: styles.success,
        error: styles.error,
      }}
    />
  );
}

CloseButton.js

export function CloseButton({ onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        position: "absolute",
        top: "3px",
        right: "5px",
        cursor: "pointer",
        border: "none",
        background: "transparent",
        fontSize: "20px",
        padding: "0px",
        lineHeight: "1",
        color: "#fff",
      }}
    >
      ×
    </button>
  );
}

Toast.js

import { toast } from "react-hot-toast";
import { CloseButton } from "./CloseButton";
import { styles } from "./Container";

var getContent = (message) => (t) =>
  (
    <span>
      {message}
      <CloseButton onClick={() => toast.dismiss(t.id)} />
    </span>
  );

export class UINotificationService {
  constructor(repository) {
    this.repo = repository;
  }

  error(message) {
    if (message) {
      this.repo.error(getContent(message));
    }
  }

  success(message) {
    if (message) {
      this.repo.success(getContent(message));
    }
  }

  warn(message) {
    if (message) {
      this.repo(getContent(message), {
        duration: 4000,
        removeDelay: 4000,
        style: styles.warn.style,
      });
    }
  }

  clear() {
    this.repo.dismiss();
  }
}

const createUINotificationService = () => {
  return new UINotificationService(toast);
};

export var uiNotification = createUINotificationService();

Package version: 2.5.1
React version: 18.2.0