How to change valid input colour of MUI Autocomplete element?

Question

How do I set the colour of MUI's autocomplete when there is a valid input (i.e. not empty string). I have adapted the solution from How to invoke invalid red border styling only after first click in MUI React?, where the answer uses MUI's textbook.

However, it does not appear to be working for Autocomplete.

const ValidationTextField = ({ ...args }) => {

    return (
      <TextField
        {...args}
        InputLabelProps={{
          required: false
        }}
        sx={{
          "& input:valid + fieldset": {
            borderColor: "green",
            borderWidth: 2
          }
        }}
      />
    );
  };

class JobTypeField extends React.Component {

    render() {
        return (
            <Autocomplete
                options={jobType}
                onChange={this.props.handleChange}

                renderInput={(params) => 
                <ValidationTextField {...params} 
                label="Job Type" 
                required
                />}
            />
        );
    }
}

Am I doing something wrongly? Thank you!