How to change fontColor when disabled and change borderColor of input when hovering - TimePicker Material UI MUI React

I'm trying to change some properties in TimePicker Component, like change the fontColor when TimePicker is disabled and remove the defauld borderColor when hovering the input. Does anyone knows how to achieve it using sx or slotProps? Here's some code of this component and the current application in sandbox:

codesanbox

<TimePicker
          {...field}
          ampm={false}
          disabled={disabled}
          views={["hours", "minutes", "seconds"]}
          value={selectedTime}
          onChange={(newTime: any) => {
            setSelectedTime(dayjs(newTime));
            field.onChange(newTime);
          }}
          timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}
          sx={{
            width: "100%",
            backgroundColor: "#ccc",
            borderRadius: "0.45rem",
            fieldset: {
              borderRadius: "0.45rem"
              // borderColor: "red"
              // "&:hover": {
              //   borderColor: "red",
              // },
            },
            input: {
              color: "white",
              fontSize: "1.4rem",
              "&::-webkit-input-placeholder": {
                WebkitTextFillColor: "#FFF",
                opacity: 1
              }
            },
            "& .MuiSvgIcon-root": {
              color: disabled ? "#777" : "white"
            }
          }}
          slotProps={{
            popper: {
              sx: {
                "& .MuiList-root": {
                  backgroundColor: "#333335"
                },
                "& .MuiMenuItem-root": {
                  "&.Mui-selected": {
                    backgroundColor: "#04395E",
                    color: "white"
                  },
                  color: "white"
                },
                "& .MuiDialogActions-root": {
                  backgroundColor: "#333335"
                },
                "& .MuiSvgIcon-root": {
                  color: "white",
                  "&.MuiSvgIcon-fontSizeMedium": {
                    backgroundColor: "#04395E",
                    color: "white"
                  }
                },
                // OK button
                "& .MuiDialogActions-root .MuiButton-text": {
                  color: "white"
                }
              }
            }
          }}
        />

You can pass these values to the sx prop -

sx={{
      "& .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled": {
         color: "black",
         "-webkit-text-fill-color": "black"
        },

      "&:hover .MuiOutlinedInput-notchedOutline": {
           borderColor: "rgba(0, 0, 0, 0.23)"
        }
   }}

Codesandbox link