Bouton changeant de couleur après la fermeture du modal

Je travaille sur un site, et j'ai un modal qui ressemble essentiellement à ceci:

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;

Lorsque je clique sur enregistrer les modifications ou que je ferme le modal de quelque manière que ce soit, le bouton d'ajout dans l'image (sur lequel j'ai cliqué pour ouvrir le modal) prend une couleur indésirable.

La couleur ne revient à la normale que lorsque je clique n'importe où sur l'écran.

Comment puis-je empêcher que cela se produise? Mon fichier Additem.css :

.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;
 }

Solution du problème

Le problème de couleur réside dans le bouton d'amorçage. Il a la propriété de revenir à une couleur. En utilisant un bouton normal comme :

Bouton #Réagir

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

à la place de

#Bouton d'amorçage

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

est efficace pour résoudre ce problème.