react hook form Controller with MUI Autocomplete freeSolo

Question

I have a MUI Autocomplete Component wrapped in an react-hook-form Controller. I want the Autocomplete to behave like Select and Text Field: meaning that the user either chooses an option from a list or if it doesn't exist in the list, the user can type a new option that will be later added to the database where the list comes from. For that, I added the props "freeSolo" and "autoSelect" to the Autocomplete.

So far I have managed to make the Select part work, but not the text input one. I have searched in several places but I didn't find a solution to my problem. Here's my code:

                <Controller
                  name='userName'
                  control={control}
                  rules={{
                    required: 'This field cannot be empty',
                  }}
                  render={({ field, fieldState: { error } }) => {
                    const { onChange, value, ref } = field;
                    return (
                      <>
                        <Autocomplete
                          id='controlled-autocomplete'
                          size='small'
                          freeSolo
                          autoSelect
                          options={users}
                          getOptionLabel={(user) =>
                            user.name ? user.name : ''
                          }
                          value={
                            value
                              ? users.find((user) => {
                                  return value === user.id;
                                }) ?? null
                              : null
                          }
                          onChange={(event, newValue) => {
                            onChange(newValue ? newValue.id : null);
                          }}
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              placeholder='User name'
                              color={error ? 'error' : 'secondary'}
                              inputRef={ref}
                            />
                          )}
                        />
                        {error ? (
                          <Typography color='error' variant='caption'>
                            {error.message}
                          </Typography>
                        ) : null}
                      </>
                    );
                  }}
                />

And the users list should look something like this:

const users = [
  { id: 0, name: 'John' },
  { id: 1, name: 'Carl' },
  { id: 2, name: 'Mary' },
  { id: 3, name: 'Mark' },
  { id: 4, name: 'Kate' },
  { id: 5, name: 'Rita' }
];

EDIT I tried adding the following props to the Autocomplete:

inputValue={value ? value : ''}
onInputChange={(event, newValue) => {
                  onChange(newValue ? newValue.id : null);
}}

But now, because my users list has both numbers and strings, it's throwing the error:

Warning: Failed prop type: Invalid prop `inputValue` of type `number` supplied to `ForwardRef(Autocomplete)`, expected `string`.