impossible to properly change spinner on unstyled toast with custom css

[fgaujard]

My Toaster :

export const ToasterProvider: FC<ToasterProviderProps> = ({
  children,
  theme = "light",
  richColors = false,
  expand = false,
  visibleToasts = 3,
  position = "bottom-right",
  closeButton = false,
  offset = "16px",
  mobileOffset = "8px",
  swipeDirections,
  dir = "ltr",
  hotkey,
  invert = false,
  toastOptions = { duration: 2000 },
  gap = 18,
  icons,
}) => {
  return (
    <>
      <Toaster
        position={position}
        theme={theme}
        richColors={richColors}
        expand={expand}
        visibleToasts={visibleToasts}
        closeButton={closeButton}
        offset={offset}
        mobileOffset={mobileOffset}
        swipeDirections={swipeDirections}
        dir={dir}
        hotkey={hotkey}
        invert={invert}
        toastOptions={{
          unstyled: true,
          classNames: {
            info: "sonner-toast toast-info",
            success: "sonner-toast toast-success",
            warning: "sonner-toast toast-warning",
            error: "sonner-toast toast-error",
            loading: "sonner-toast toast-loading",
          },
          ...toastOptions,
        }}
        gap={gap}
        icons={{
          info: icons?.info ?? <InfoIcon />,
          success: icons?.success ?? <SuccessIcon />,
          warning: icons?.warning ?? <WarningIcon />,
          error: icons?.error ?? <ErrorIcon />,
          loading: icons?.loading,
        }}
      />
      {children}
    </>
  );
};

Result : (the last 3 toasts are promise or loading toasts)

and it's even worse with a custom spinner icon :

...
        icons={{
          loading: icons?.loading ?? <InfoIcon />,
        }}
...