How to change the outline bottomBorder of Mui <Input>

Question

I am trying to change the bottom Border colour of a Mui component, by default, this uses primary colour (when focused) as seen in the documentation. How can I change it to use a custom colour?

My component looks like this:

<Input
    fullWidth
    style={{ width: '100%', padding: '0px' }}
    required
    value={value}
    sx={{ borderBottom: colors.ovBlack }}
    className="pins"
    inputComponent={NumberFormatCustom as any}
    inputProps={{
      inputMode: 'numeric',
      style: {
        outline: 'none',
        borderColor: colors.ovBlack,
      },
    }}
    startAdornment={(
      <InputAdornment
        position="start"
      >
        <Typography variant="countryCode">+1</Typography>
      </InputAdornment>
    )}
    onChange={(event) => {
      setValue(event.target.value);
      if (props.onChange) props.onChange(event);
    }}
  />

This is the image when focused. I want to change the bottom border from green to a custom colour.

I also inspected the HTML tree. To find the culprit. Via the inspector, I can change the colour. But via code, I don't know how I can override this colour.