Renaming files doesn't take effect in VScode while using WSL2

Question

I have a very annoying problem in my VScode setup.

I'm using WSL as a terminal to work on my projects and occasionally, mistype the name of one of the folder or file that I'm working with.

For example:

I accidentally created the Mainheader.js file in layout folder (without the capitalized L) therefore, I decided to rename the folder with a capital L.

Now on my React app, any changes made to MainHeader.js file will not be reflected. I did update the related import.

So I decided to delete the entire folder and recreate it with MainHeader.js but this is what I end up with.

The file is there in my folder but when I click on it, I get

"Unable to open Mainheader.js - File not found"

So I try to create it then I get this error:

Unable to create file 'wsl\path]to\MainHeader.js' that already exists when overwrite flag is not set

Has anyone run into this type of behavior in WSL before? It's quite annoying because the only workaround I've found so far is to create a completely different folder with a different name...

Any help would be appreciated. I can't really work like this.