Button changing color after closing modal - html

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="name#example.com"
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.