I am trying to use readOnly in a select element so the user is unable to change the value of the input field but when submiting the form I still need that value for the Api and I heard that the only way to do that in react-hook-form is to use readOnly instead of disabled, it worked in a normal input field but typescript gives an error in select element. This is the code:

interface dataProps {
  field_id: any;
  disabled: boolean;
}

<select
  readOnly={props.disabled}
  id={props.field_id}
  {...register(...)}
  defaultValue={...}
  onChange={...}
  >
  <option>
    {...}
  </option>
  renderList(...)
</select>

I tried to shorten the code as much as possible, this is the whole error I get:

Type '{ children: any[]; defaultValue: any; onChange: (e: ChangeEvent<HTMLSelectElement>) => void; onBlur: ChangeHandler; ref: RefCallBack; name: string; readOnly: true; id: any; }' is not assignable to type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.
  Property 'readOnly' does not exist on type 'DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>'.

I read documentation of react-hook-form but I didn't see anything there about using readOnly, I landed on this link and when I tried to change the input there that has readOnly to select it gives the same error, is there a way to make that readOnly work or there is a workaround to make disabled save the data inside the handleSubmit?