React bootstrap css take over other components style and changes size

I have a problem, React Bootstrap's (react-bootstrap.github.io) CSS took over my other components's style and made their buttons, fonts, inputs and etc bigger.

Is there is anyway to prevent or avoid that but to use the Modal CSS? See screenshots below.

Modal.jsx // The "problematic" code

 import Modal from 'react-bootstrap/Modal';
 import 'bootstrap/dist/css/bootstrap.min.css'; 

     <link 
        rel='stylesheet'
       href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css'
     integrity='sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We'
       crossorigin='anonymous'
    />;

With the 'bootstrap/dist/css/bootstrap.min.css'



Without bootstrap CSS