Dismissing all toasts in a single container clears all toasts everywhere

[simgar98]

Do you want to request a feature or report a bug?
Bug 🐛

What is the current behavior?
When dismissing all toasts from a single container it will simply clear all toasts everywhere.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

Created a test for toast.cy.tsx:

it('remove all toasts for a given container', () => {
    const toastId = '123';

    toast('first container', {
      toastId,
      containerId: Containers.First
    });
    toast('third container', {
      toastId,
      containerId: Containers.Third
    });
    toast('third container second toast', {
      containerId: Containers.Third
    });

    cy.resolveEntranceAnimation();

    cy.findByText('first container').should('exist');
    cy.findByText('third container second toast').should('exist');
    cy.findByText('third container')
      .should('exist')
      .then(() => {
        toast.dismiss({
          containerId: Containers.Third,
        });

        cy.resolveEntranceAnimation();

        cy.findByText('first container').should('exist');
        cy.findByText('third container').should('not.exist');
        cy.findByText('third container second toast').should('not.exist');
        cy.findByText('first container').should('exist');
      });
  });

The fix is fairly easy, store.ts line ~70 should be something like:

    const container = containers.get(params.containerId);
    container ? container.removeToast(params.id) :
      containers.forEach(c => {
        c.removeToast(params.id);
      });

I will try to create a pull request for this, however I am new to contributing, so... lets see how this goes!

What is the expected behavior?
Remove all toasts from the provided container, leave all other toasts alone.

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

[simgar98]

The Third Container in the test is simply a new container that has a higher limit, as all current containers in the current tests had a limit of 1 for queue testing (I think?)

const Containers = {
    First: 'first',
    Second: 'second',
    Third: 'third'
  };

  beforeEach(() => {
    cy.mount(
      <>
        <ToastContainer
          autoClose={false}
          position="top-left"
          limit={1}
          containerId={Containers.First}
          closeOnClick
        />
        <ToastContainer
          autoClose={false}
          position="top-right"
          limit={1}
          containerId={Containers.Second}
          closeOnClick
        />
        <ToastContainer
          autoClose={false}
          position="bottom-right"
          limit={10}
          containerId={Containers.Third}
          closeOnClick
        />
      </>
    );
  });