I am using MUI v5. I have made a form to choose fighters but I am stuck trying to override the label color of the TimePicker component. All my other form components have the normal color I want but I can't figure out how to change the color of the TimePicker.

The TimePicker component is not focused in the image. When I select the other form components the color changes to red, like it should but TimePicker stays red the entire time focused or not.

I have tried changing my theme colors, I have used

inputProps={{ className: classes.input }}

within the component and successfully changed the text color and background of the TimePicker but can't find the proper CSS to change the label color.

In my code you can see I have tried to override the .root and .floatingLabelFocusStyle but to no avail.

import { makeStyles, TextField } from "@material-ui/core";
import { LocalizationProvider, TimePicker } from "@mui/lab";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import { useState } from "react";

const useStyles = makeStyles((theme) => ({
  input: {
    color: 'blue'
  },
  floatingLabelFocusStyle: {
    
  },
  root: {
    color: 'blue'
  }
}));

const GameTimePicker = ({ setFormGameTime, currentTime = '' }) => {

  const classes = useStyles();
  
  const [gameTime, setGameTime] = useState(currentTime);

  const handleChange = (e, v) => {
    // console.log(v);
    setGameTime(v);
    setFormGameTime(v);
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <TimePicker
          ampm={false}
          views={['minutes', 'seconds']}
          inputProps={{ className: classes.input }}
          color='success'
          inputFormat="mm:ss"
          mask="__:__"
          label="Time of fight/event"
          value={gameTime}
          onChange={handleChange}
          renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  )
}

export default GameTimePicker;

Any ideas how I can override this color?