Problem compiling React-Bootstrap in SPFX Project

I have installed react-bootstrap@2.0.0-beta.6 on my machine and included it in my project with ‘import ~bootstrap/scss/bootstrap’

When I run gulp serve I get the following error:

(13:46:14) Error – (webpack) ‘dist’:
./lib/webparts/mslHomePage/components/MslHomePage.module.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./lib/webparts/mslHomePage/components/MslHomePage.module.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
(40:4) Missed semicolon
@ ./lib/webparts/mslHomePage/components/MslHomePage.module.css 1:14-161
@ ./lib/webparts/mslHomePage/components/MslHomePage.module.scss.js
@ ./lib/webparts/mslHomePage/components/MslHomePage.js
@ ./lib/webparts/mslHomePage/MslHomePageWebPart.js

This doesn’t happen if I don’t import react-bootstrap.

This is what I have installed
+– bootstrap@5.1.0
+– gulp@3.9.1
+– install@0.13.0
+– npm@7.23.0
+– office-ui-fabric-react@6.214.0
+– react@16.14.0
+– react-bootstrap@2.0.0-beta.6
+– react-dom@16.14.0
`– webpack@4.0.0

I’m thinking that there is a problem with the bootstrap css that is getting picked up but I can’t think what I can do about it.

Any suggestions?