when i try to change the value in autocomplete of material-ui, i always get its value 0, here i have uploaded my whole code, can anyone please check my code and help me to resolve this issue ? any help will be really appreciated.

type Props = {
    team?: Team;
    onSubmit: (params: TeamParams) => Promise<unknown>;
    onDelete?: () => void;
};

type State = {
    userId: string;
};

export const TeamForm: FC<Props> = ({ team, onSubmit, onDelete }) => {
  const { users } = useDataContext();
  const [state, setState] = useState<State>({
    userId: tearm?.userId.toString() || '',
  });

  :
  :

const userValue =
        users.find(user => user.id == Number(state.userId))
return (
  <Autocomplete
    options={users.map(
      c => `${c.id}: ${c.name}`,
    )}
    value={state.userId}
    inputValue={
      userValue?.id +
      userValue?.name
     }
     onChange={event =>
          setState({
               ...state,
               userId: (event.target as HTMLInputElement).value,
           })
      }
     renderInput={params => (
       <TextField
         {...params}
         fullWidth
         label='ユーザー'
       />
     )}
   />
  );
};

Also, if you add the following, you cannot modify the text box. can anyone please check my code and help me to resolve this issue ? any help will be really appreciated.

inputValue={`${userValue?.id}: ${userValue?.organizationName} ${userValue?.name}`}