React load only one scss based on variable

UPDATE: I figured out what was happening and there was no way for anyone to answer because a lot of missing information - like where were the light and dark variable files being exported to. Answer, everywhere... they were exporting everywhere so naturally both files were being included in the frontend.

Expanding on my previous question as I've tried a different approach from what I was able to find online.

Instead of trying to load certain stylesheets based on an application variable and the extension of the stylesheets, I've defined two css variables files and only want one to load for the frontend application.

import React, {lazy, Suspense} from "react";
import ApplicationVariable from "./appVars";
import LoadingComponent from "../loadingComponent"; // our fallback

// I made 2 components that import the light/dark-variables.scss files;    
const LightThemeVariables = lazy(() => import("./light-variables"));
const DarkThemeVariables = lazy(() => import("./dark-variables"));

export const ThemeSelector = ({ children }) => {
    return (
        <>
            <Suspense fallback={<LoadingComponent loading={true} />}>
                {ApplicationVariable.isLight() ? <LightThemeVariables /> : <DarkThemeVariables  />}
            </Suspense>
            {children}
        </>
    );
};

// Then in the frontend application I wrapped my app in the ThemeSelector
ReactDOM.render(
        <ThemeSelector>
            <App />
        </ThemeSelector>,
    document.getElementById('root')
);

From what I read doing the above will allow my application time to figure out which variables file it needs then load the app once a "decision" is made with the loading component available to the user as feedback that something is happen.

It works, I can see the loader but, I'm getting both variable files still.

Could it be because I have the variable in the src directory? I moved them higher and both are still loaded. I've cleared the cache, deleted the builds to get it as clean as possible without success.

I'm stumped. Guidance would be much appreciated!

Here's what was happening: I was exporting the light and dark variables components within the main index.js so no matter what both components were getting compiled into the application.

Only the ThemeSelector should be using the variables files so I restricted the exports and made sure they only get pulled into the ThemeSelector component and then the conditional has the power to dictate which variables file get loaded.