SPFX React Webpart - Problem with react boostrap

Question

I am building my first spfx react webpart to be depoyed on SharePoint Online. I have trouble making react bootstrap work.

What i want to achieve is to open a form in a modal when the user click on a button. I am using react bootstrap to create a form and display it in a modal :

https://react-bootstrap.github.io/components/forms/

https://react-bootstrap.github.io/components/modal/

I include react bootsrap components this way in my component after installing the npm package :

import Form from 'react-bootstrap/Form';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';

react bootstrap needs bootstrap to be included for the styling to work. I first included bootrap css this way in the component tsx file :

import 'bootstrap/dist/css/bootstrap.min.css';

All work fine and it is displayed properly but it has side effects on the Sharepoint UI, for example on other native sharepoint webparts.

So i used sass as described in this post to prevent leaking css: SPFX web part, CSS is leaking into the whole sharepoint site

Here is my custom scss file :

.my-app {
    @import '../../../../node_modules/bootstrap/scss/bootstrap.scss';
     }

I import my custom .scss file this way in the component :

import "./bootsrap-custom.scss";

The button is rendered properly with the css class .my-app. But now that i use sass the Modal and the Form are rendered without any style. The modal is displayed without styling at the bottom of the page.

If i put the Form outside of the modal the bootstrap css is applied properly to the Form.

I don't understand why when using sass this way the Modal and every element in this Modal are not rendered properly.