Dropdown/Select Value Not Changing - useState

My dropdown menu (Material UI select) says "Search By" and then we click on it, it gives a list. When I select on of the options, I want to store the option and change the "Searchh By" to the selected option.

export default function UserSearchPage(){
  const [criteria, setCriteria] = useState('');
  const [searchItem, setSearchItem] = useState('');
  return (
    <div>
      <div className='main-content'>
        <Select 
        value = {criteria}
         onChange={value => {
          setCriteria(value);}}
        displayEmpty>
          <MenuItem disabled value="">
            <em>Search By</em>
          </MenuItem>
          <MenuItem value={1}>First Name</MenuItem>
          <MenuItem value={2}>Last Name</MenuItem>
          <MenuItem value={3}>Phone Number</MenuItem>
          <MenuItem value={4}>Email</MenuItem>
        </Select>
        <br></br><br></br>
         <SearchBar
         value= {searchItem}
         onChange={value => {
          setSearchItem(value);}}
            onRequestSearch={() => console.log('onRequestSearch')}
            style={{
              margin: '0 auto',
              maxWidth: 800
            }}
          />
            </div>
          )
    </div>
  );
}

With my current onChange on the Select, I get this error on value:

Argument of type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to parameter of type 'SetStateAction<string>'.
  Type 'ChangeEvent<{ name?: string | undefined; value: unknown; }>' is not assignable to type '(prevState: string) => string'.

If I use this onChange:

onChange={event => setCriteria(event.target.value)}

I get an error that:

Argument of type 'unknown' is not assignable to parameter of type 'SetStateAction<string>'.
  Type 'unknown' is not assignable to type '(prevState: string) => string'.

I tried creating a sandbox but I have no idea how to resolve the error. The code looks fine but it doesn't compile: https://codesandbox.io/s/sleepy-buck-5t7bq