I have a Dialog that receives a set of colors through props. According to this set of colors I need to set a border color for my Material UI TextField, but I can’t get it to work.

I have this makeStyles:

const useStyles = makeStyles(theme => ({
    root: {
      '& .MuiOutlinedInput-root': {
        '&.Mui-focused fieldset': {
          borderColor: ({colors}) => `${colors ? colors.greenAccent[600] : "white"}`,
        },
      },
    },
  })
);

And this is my TextField

    <TextField
      style={{ marginLeft: "4px", marginTop: "8px", color:  colors ? colors.grey[200] : "white"}}
      className={classes.root}
      label="Valor da meta"
      variant="outlined"
      name="valor_meta"
      id="valor_meta"
      InputLabelProps={{
        style: { 
          color: colors ? colors.grey[200] : "white",
         }
      }}

      value={valorMeta}
      onChange={(e) => {
        const inputValue = e.target.value;
        if (/^[0-9.,]*$/.test(inputValue)) {
          if (
            inputValue.indexOf(".") === inputValue.lastIndexOf(".") &&
            inputValue.indexOf(",") === inputValue.lastIndexOf(",")
          ) {
            if (
              !(inputValue.includes(",") && inputValue.includes("."))
            ) {
              setValorMeta(inputValue);
            }
          }
        }
      }}
    />

When I open the Dialog the border color remains the default color when focused, but if I save the Dialog file the correct color is applied to the border. How can I make it work without this save issue?