How to dynamically load a css file in a react function component?

In my react application, in a component, I need to load a separate css file dynamically based on a condition and the css styles should get applied.

The condition here is in the url if I have a query string say "customStyleName" with some value , then this dynamic css file should get loaded. I am using css modules and loading a sass file for this component. But, when this query string "customStyleName" present in the url, this dynamic css file should be loaded and the styles would be overrides

I could manage to check the condition if customStyleName query string present in the url and load the css file using require() (dynamic imports didn't work here) and the styles get applied in my local. It's working fine in my local.

localhost:3000/ss/ext/onboarding?customStyleName='ss'

useEffect(() => {
    const query = new URLSearchParams(window.location.search);
    const customStyleName = query.get("customStyleName");

    if (customStyleName) {
      console.log("apply customStyleName");
      require("./customStyles.css");
    } else {
      console.log("customStyleName empty");
      return;
    }
  }, []);

But, in dev or other environments, it is loading the dynamic css file even though the necessary query string not present in the url. My react application is created using create-react-app.

when I checked in the developer tools, the css file is getting loaded in dev environments. I am confused why the same thing working perfectly in my local and its not in other environments. Any help would be appreciated. Thanks!