MDBToast overlap

Toasts have by default an absolute position, and it's the same for first and n'th toast.If you want to stack them one above another, use MDBStack component, example:

import React, { useState } from 'react';
import { MDBToast, MDBBtn, MDBStack } from 'mdb-react-ui-kit';

export default function App() {
  const [stackingToasts, setStackingToasts] = useState<Array<Record<string, any>>>([]);
  const [stackingColor, setStackingColor] = useState(0);

  const handleClick = () => {
    const colors = ['primary', 'warning', 'info', 'success', 'secondary', 'danger', 'light'];

    stackingColor + 1 > colors.length - 1 ? setStackingColor(0) : setStackingColor(stackingColor + 1);

    setStackingToasts([
      ...stackingToasts,
      {
        color: colors[stackingColor],
        count: stackingToasts.length > 0 ? stackingToasts.length + 1 : 1,
      },
    ]);
  };

  return (
    <>
      <MDBBtn className='m-1' onClick={handleClick}>
        Show toast notification
      </MDBBtn>

      <MDBStack className='position-absolute'>
      {
        stackingToasts.map((item) => (
          <MDBToast
            color={item.color}
            defaultOpen
            autohide
            width={450}
            delay={2000}
            key={item.count}
            headerContent={
              <>
                <strong className='me-auto'>{item.count}</strong>
                <small>11 mins ago</small>
              </>
            }
            bodyContent='Stacking Element'
          />
        ))
        }
      </MDBStack>

    </>
  );
}

When I used this example code, I can't close toast ... video