Load Component's CSS only When Component is Rendered in React

Question

There are two components wherein only one component will be rendered at a time conditionally. Every component has its respective CSS file which gets loaded inside the component using import statement, i.e. import 'Header.css'.

The problem is, even if one component is rendered, I could see both CSS files in the page Header. Is there any way to avoid loading unused /(unrendered) components?

Note 1: Can't use module css due to a technical reason as it needs entire app refactoring

Note 2: Found a couple of similar questions in SO but none of them have proper answers.

Load component css when component render

Load a component's CSS only if it is rendered

The below question has an accepted answer but the solution seems not working in react 18 with Webpack 4 :

React: Load component's CSS only when component is rendered