'containerId' option does not work, toast renders into both containers

[willashley23]

bug

Attempting to render a toast into a specific container does not work as expected, it renders the toast in both containers simultaneously.

<ToastContainer
          position='bottom-right'
          autoClose={6000}
          hideProgressBar={false}
          newestOnTop={false}
          containerId='gpt'
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          theme='light'
          bodyClassName={() => 'text-sm font-white font-med flex p-3'}
        />

<ToastContainer
      position='bottom-right'
      autoClose={6000}
      hideProgressBar={false}
      newestOnTop={false}
      closeOnClick
      containerId="default"
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
      theme='light'
      toastClassName={({ type }) =>
        contextClass[type || 'default'] +
        ' relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer'
      }
      bodyClassName={() => 'text-sm font-white font-med flex p-3'}
    />

     toast(data.message, {
            position: 'bottom-right',
            autoClose: false,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            containerId: 'gpt', <- regardless of this option, it always renders in both containers
          });

What is the expected behavior? It should only render the toast into the specified container

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? 18

[fkhadra]

Hey @willashley23, I believe the issue is coming from your configuration. It work as expected see

[razrinn]

hi @willashley23 , I'm currently facing the same issue, did you manage to fix it?