Value type for Material UI's Select component

I am using Material UI's Select component (which is like a drop down menu) like this:

const [criteria, setCriteria] = useState('');
...
  let ShowUsers = () => {
    console.log('Working criteria', typeof(criteria));
    const where: UserFilter = {};
    if (criteria == '1') {
      loadUsers({
        variables: {
          where: where,
        },
      });
    }

    if (criteria == '2') {
      if (searchItem) {
        where.firstName_contains = searchItem;
        loadUsers({
          variables: {
           where: where,
          },
        });
      }
    }
}
...
return(
        <Select
          value={criteria}
          onChange={event => setCriteria(event.target.value as string)}
          //onChange={event => setCriteria(event.target.value)}
          displayEmpty>
          <MenuItem disabled value="">
            <em>Search By</em>
          </MenuItem>
          <MenuItem value={1}>All</MenuItem>
          <MenuItem value={2}>First Name</MenuItem>
          </Select>

        <Button onClick={() => ShowUsers()}>Search
        </Button>
)

Currently this gives me a warning that

Expected '===' and instead saw '=='  eqeqeq

To investigate this, I tried to print out the typeof(criteria) in the showUsers function. The type is number.

Hence, I changed (criteria === 1) etc. But then it gives an error that This condition will always return 'false' since the types 'string' and 'number' have no overlap.ts. But both are already numbers so I don't quite understand this.

Additionally, I also tried changing things like this:

const [criteria, setCriteria] = useState<number>();
..
onChange={event => setCriteria(Number(event.target.value))}

However, then I get new warnings that:

you have provided an out-of-range value `undefined` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are ``, `1`, `2`.

Warning: A component is changing an uncontrolled input of type hidden to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 

and if I simply use criteria === '1' without changing anything else, the conditions are never made true even when they should be.

Where am I going wrong? Probably something minor.