React Bootstrap Alert Dismissible Button Without style - reactjs

Question

I have this alert that I want to have an "X" button to dismiss the alert, but it doesn't have the bootstrap style. I already tried set the closeLabel to an empty string but don't fix the style issue
How should it be:
Here is the code:
<Alert variant="danger" onClose={() => setShowMessage(false)} dismissible>
<Alert.Heading>Oh snap! You got an error!</Alert.Heading>
<p>
Change this and that and try again. Duis mollis, est non commodo
luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Cras mattis consectetur purus sit amet fermentum.
</p>
</Alert>

Answer 1

I have same problem.
found one post similar here but dontk work for me. But for the moment (until found a real solution) I use class ".close{}" (you can see it in the insperctor of the element) and modify css format for the button.
My css:
enter code here
.close ::before{
content: 'X';
visibility: visible;
color: "black";
font-weight: bold;
}
.sr-only::before{
visibility: hidden;
}
.close{
/*background-color: red; */
visibility: hidden;
position: absolute;
right: 32px;
top: 10px;
width: 20px;
height: 20px;
background-color: rgb(247, 12, 12, 0.5);
}