Can't Change Mui input label color on focus from theme.ts

Here in my next.js app, I am trying to change the color of label of mui (Material UI) input field but it is not applying any styles to it.

Mui version is latest.

This is the chunk of code from my theme.ts file, which suppose to change the input field's border bottom color and change the label color. But it is only changing border bottom color.

MuiInputBase: {
  styleOverrides: {
    root: {
      fontFamily: "Manrope",
      // default state standard variant
      "&.MuiInputBase-root": {
        color: "#2A2B2F",
        // changing borderBottom color on focus working*
        "&.Mui-focused:after": {
          borderBottom: "2px solid #2E98EF",   <-- It is working
        },
      },
      // focused state of label of standard variant
      "&.Mui-focused .MuiInputLabel-root": {
        color: "#2E98EF",      <-- It is not working.
      }
    },
  },
},

I tried changing color of label using global.css file. Copy pasting the same classes and give it another color and it does work.

.muisomething.Mui-focused{
  color : red
}

I also tried modifing it using SX prop, It also does work. But I want it to be handled from the theme.ts or theme.js file. Which is not happening.

Even I can't see my styles which I used in theme.ts file from inspecting browser so !important is also Not working.

Also I tried targeting the label directly

      // focused state of label of standard variant
      "& label.Mui-focused": {
        color: "#2E98EF",
      },

Like that but the styling isn't showing up, but the border bottom is working.

I want it to be handled from theme.ts file.

Want to know your valuable thoughts on this issue. Let me know how can I handle this from theme.ts file.

Thanks for your time.

from Can't Change Mui input label color on focus from theme.ts