I am designing a dark-theme mode for my react app, I got two CSS files,

1. antd.css (light theme)
2. antd.dark.css (dark theme)

I wanted to import these CSS files dynamically, to be more specific I want to import these files based on a particular condition.

In the above code, "userTheme" is a react state, whose default value is 'false' [type: boolean], I have created a switch button which set the value of "userTheme" state.

Below is the screenshot of my react app. [userTheme: false] // showing light theme

Below is the screenshot of my react app when I switched it to dark mode. [userTheme: true] // showing dark theme

Below is the screenshot of my react-app when I switched back to light-theme.
[userTheme: false] // but showing still dark theme

The problem is, it is still in the dark mode (i guess that is because antd.dark.css file is still loaded), I checked my "userTheme" state value it is set to 'false' in react state.

Is there any way to unload stylesheet dynamically in this case? Maybe that will solve this problem. Can anyone please tell me how can I fix this?