update props instead of overriding

src/components/ToastContainer.tsx

@@ -1,12 +1,12 @@
 import cx from 'clsx';
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
+import { toast } from '../core';
 import { useToastContainer } from '../hooks/useToastContainer';
 import { ToastContainerProps, ToastPosition } from '../types';
 import { Default, Direction, isFn, parseClassName } from '../utils';
 import { Toast } from './Toast';
 import { Bounce } from './Transitions';
-import { toast } from '../core';
 
 export const defaultProps: ToastContainerProps = {
   position: 'top-right',
@@ -23,13 +23,10 @@ export const defaultProps: ToastContainerProps = {
 };
 
 export function ToastContainer(props: ToastContainerProps) {
-  let containerProps: ToastContainerProps = useMemo(
-    () => ({
-      ...defaultProps,
-      ...props
-    }),
-    [props]
-  );
+  let containerProps: ToastContainerProps = {
+    ...defaultProps,
+    ...props
+  };
   const stacked = props.stacked;
   const [collapsed, setIsCollapsed] = useState(true);
   const containerRef = useRef<HTMLDivElement>(null);

src/core/containerObserver.ts

@@ -32,24 +32,19 @@ interface ActiveToast {
   staleId?: Id;
 }
 
-interface ContainerObserverParams {
-  id: Id;
-  props: ToastContainerProps;
-  dispatchChanges: OnChangeCallback;
-}
-
 export type ContainerObserver = ReturnType<typeof createContainerObserver>;
 
-export function createContainerObserver({
-  id,
-  props,
-  dispatchChanges
-}: ContainerObserverParams) {
+export function createContainerObserver(
+  id: Id,
+  containerProps: ToastContainerProps,
+  dispatchChanges: OnChangeCallback
+) {
   let toastKey = 1;
   let toastCount = 0;
   let queue: QueuedToast[] = [];
   let activeToasts: Id[] = [];
   let snapshot: Toast[] = [];
+  let props = containerProps;
   const toasts = new Map<Id, Toast>();
   const listeners = new Set<Notify>();
 
@@ -218,6 +213,9 @@ export function createContainerObserver({
     toasts,
     clearQueue,
     buildToast,
+    setProps(p: ToastContainerProps) {
+      props = p;
+    },
     setToggle: (id: Id, fn: (v: boolean) => void) => {
       toasts.get(id)!.toggle = fn;
     },

src/core/store.ts

@@ -122,11 +122,7 @@ export function registerContainer(props: ToastContainerProps) {
   const id = props.containerId || Default.CONTAINER_ID;
   return {
     subscribe(notify: () => void) {
-      const container = createContainerObserver({
-        id,
-        props,
-        dispatchChanges
-      });
+      const container = createContainerObserver(id, props, dispatchChanges);
 
       containers.set(id, container);
       const unobserve = container.observe(notify);
@@ -137,6 +133,9 @@ export function registerContainer(props: ToastContainerProps) {
         containers.delete(id);
       };
     },
+    setProps(p: ToastContainerProps) {
+      containers.get(id)?.setProps(p);
+    },
     getSnapshot() {
       return containers.get(id)?.getSnapshot();
     }

src/hooks/useToastContainer.ts

@@ -1,13 +1,13 @@
-import { useMemo } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store';
+import { useRef } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { isToastActive, registerContainer } from '../core/store';
 import { Toast, ToastContainerProps, ToastPosition } from '../types';
 
 export function useToastContainer(props: ToastContainerProps) {
-  const { subscribe, getSnapshot } = useMemo(
-    () => registerContainer(props),
-    [props]
-  );
+  const { subscribe, getSnapshot, setProps } = useRef(
+    registerContainer(props)
+  ).current;
+  setProps(props);
   const snapshot = useSyncExternalStore(subscribe, getSnapshot);
 
   function getToastToRender<T>(