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

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>

    </>
  );
}