npm i @sweetalert/with-react

import Swal from "sweetalert2";
import "sweetalert2/src/sweetalert2.scss";

const Sweetalert = memo(() => {
    function Sweetalert1() {
        Swal.fire({
            title: 'Hello! This is a Basic Message.',
            backdrop: `rgba(60,60,60,0.8)`,
        })
    }

return(
      <div>
          <Card>
              <Card.Header>
                  <Card.Header.Title>
                      <h4 className='mb-0'>A Basic Message</h4>
                          <p>A short communication sent from one person to another or the central theme or idea of a communication.</p>
                      </Card.Header.Title>
                  </Card.Header>
                  <Card.Body className="text-center">
                      <Button onClick={Sweetalert1}>Try Me</Button>
                  </Card.Body>
           </Card>
      </div>
  )
}