React Lazy Import does not include CSS files

Question

I have a react app setup with CRA.

In my App.js I would load my css files, components and define my routes.

import 'semantic-ui-css/semantic.min.css';
import './css/global.css';
import './index.css';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import ResetPassword from './pages/ResetPassword';
import ResetPasswordConfirm from './pages/ResetPasswordConfirm';

.... 


return (
          <Router>
                <Switch>
                    <Route path="/reset-password">
                        <ResetPassword intl={intl} />
                    </Route>
                    <Route path="/about-us">
                        ...
                    </Route>
             ....
); 

Now, I want to implement route-based code splitting with React.lazy.

I changed my component imports as follows:

const ResetPassword = lazy(() => import('./pages/ResetPassword'));
const ResetPasswordConfirm = lazy(() => import('./pages/ResetPasswordConfirm'));

and I updated my return method as follows:

return (
      <Router>
                <Suspense fallback={<div>Loading...</div>}>
                    <Switch>
                         <Route path="/reset-password">
                            <ResetPassword intl={intl} />
                        </Route>
                        <Route path="/about-us">
                            ...
                        </Route>

);

The problem I'm facing is that none of my CSS files which I import above in my App.js are being loaded into the components.

I didn't eject my app from CRA so I don't have any custom webpack config.