Button changing color after closing modal

Question

I am working on a site, and i have a modal which basically looks like this:

import React,{useState} from "react";
import './AddItem.css';
import { Form, Button,Modal } from "react-bootstrap";

function AddItem({open, setOpen})
{
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
    return(
      <>
      <Button className="add" onClick={handleShow}>
           ADD
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>Email address</Form.Label>
              <Form.Control
                type="email"
                placeholder="[email protected]"
                autoFocus
              />
            </Form.Group>
            <Form.Group
              className="mb-3"
              controlId="exampleForm.ControlTextarea1"
            >
              <Form.Label>Example textarea</Form.Label>
              <Form.Control as="textarea" rows={3} />
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default AddItem;

When i click on save changes, or close the modal in any way, the add button in the picture,(which i clicked to open the modal) turns un undesirable color-

The color only reverts back to normal when i click anywhere else on the screen.

How do i prevent this from occuring? My Additem.css file:

.add{
    position: absolute;
    top: 21.35%;
    left: 61%;
    height: 6%;
    width: 10%;
    color: white;
    background-color: #283d4a;
    border-left: 1.5px solid #15aef1;
    border-right: 1.5px solid #15aef1;
    border-top: 2.7px solid #15aef1;
    border-bottom: 2.7px solid #15aef1;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
  }
  .add:hover{
    background-color:#15aef1 ;
  }

Answer 1

The color problem lies with bootstrap button. It has a property of rolling back to a color. Using a regular button like:

#React Button

<button className="add" onClick={handleShow}>
           ADD
</button>

instead of

#Bootstrap button

<Button className="add" onClick={handleShow}>
           ADD
</Button>

is effective in solving this.