MUI styles not loaded in production build

[kadosh1000]

Not sure if this is the place to post it, but looking for a solution for over a day, couldn't find anything that will help.

We just started building an app using the create-react-app using TypeScript, and also using the @mui/material for our components. Everything works great on dev (react-scripts start) but once we build the production bundle all styles are not being included.

We are using @mui/material createTheme to setup the theme and then include it in our index.tsx:

import ReactDOM from 'react-dom/client';
import 'index.scss';
import reportWebVitals from 'reportWebVitals';
import { ThemeProvider } from "@mui/material/styles";
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import theme from 'theme';
import 'fonts.css';
import Onboarding from "page/onboarding/onboarding";
const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <Router>
                <Routes>
                    <Route path="/" element={<Onboarding />} />
                </Routes>
            </Router>
        </ThemeProvider>
    </React.StrictMode>
);

reportWebVitals();

Current behavior

Everything works great on dev (react-scripts start) but once we build the production bundle (react-scripts build) all styles are not being included and there are no errors in the console.

Here are screenshots from both:
Dev:

Production:

Any idea what should I do to have the styles also in the production build?