Removed duplocate close button

src/component/Product.jsx

-import React, { useState } from 'react'
-import './../styles/Product.css'
+import React, { useState } from "react";
+import "./../styles/Product.css";
 import { Modal, Button, Alert } from "react-bootstrap";
 
 export default function Product({ product }) {
@@ -9,63 +9,67 @@ export default function Product({ product }) {
   const handleClose = () => {
     setShow(false);
     handleCloseConfirm();
-  }
+  };
   const handleShow = () => setShow(true);
   const handleShowConfirm = () => setShowConfirm(true);
   const handleCloseConfirm = () => setShowConfirm(false);
 
-  return (<div>
-    <div className="img-container" onClick={handleShow}>
-      <img className="grid-img" src={product.productImageUrl} alt={product.productName} />
-    </div>
-    <div className="prod-info">
-      <h5>{product.productName}</h5>
-      {product.sku}<br />
-      ${product.price}<br />
-      In Stock: {product.stock}
-    </div>
+  return (
+    <div>
+      <div className="img-container" onClick={handleShow}>
+        <img
+          className="grid-img"
+          src={product.productImageUrl}
+          alt={product.productName}
+        />
+      </div>
+      <div className="prod-info">
+        <h5>{product.productName}</h5>
+        {product.sku}
+        <br />${product.price}
+        <br />
+        In Stock: {product.stock}
+      </div>
 
-    <Modal show={show} onHide={handleClose}>
-      <Modal.Header closeButton>
-        <Modal.Title>{product.productName}</Modal.Title>
-      </Modal.Header>
+      <Modal show={show} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>{product.productName}</Modal.Title>
+        </Modal.Header>
 
-      <Modal.Body>
-        <div className="modal-img">
-          <img src={product.productImageUrl} alt={product.productName} />
-        </div>
-        <h5>{product.sku}</h5>
-          ${product.price}<br />
-        {product.productDescription}<br />
+        <Modal.Body>
+          <div className="modal-img">
+            <img src={product.productImageUrl} alt={product.productName} />
+          </div>
+          <h5>{product.sku}</h5>${product.price}
+          <br />
+          {product.productDescription}
+          <br />
           In Stock: {product.stock}
-      </Modal.Body>
-
-      <Modal.Footer>
-        <Button variant="danger" className="float-left" onClick={handleShowConfirm}>
-          Delete product
-          </Button>
+        </Modal.Body>
 
-        <Button variant="secondary" onClick={handleClose}>
-          Close
+        <Modal.Footer>
+          <Button
+            variant="danger"
+            className="float-left"
+            onClick={handleShowConfirm}
+          >
+            Delete product
           </Button>
-        <Button variant="primary" onClick={handleClose}>
-          Edit Product
-          </Button>
-
 
-        <Alert show={showConfirm} variant="danger">
-          <h5> Are you sure?</h5>
-
-          <Button variant="secondary" onClick={handleCloseConfirm}>
-            Cancel
-          </Button>&nbsp;&nbsp;
-          <Button variant="danger">
-            Yes, delete
+          <Button variant="primary" onClick={handleClose}>
+            Edit Product
           </Button>
 
-        </Alert>
-      </Modal.Footer>
-    </Modal>
-  </div>
-  )
+          <Alert show={showConfirm} variant="danger">
+            <h5> Are you sure?</h5>
+            <Button variant="secondary" onClick={handleCloseConfirm}>
+              Cancel
+            </Button>
+            &nbsp;&nbsp;
+            <Button variant="danger">Yes, delete</Button>
+          </Alert>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  );
 }