{all_state.length > 0 && (
        <>
          <div>
            <Autocomplete
              autoHighlight={true} //needed
              autoSelect={true}
              id="geo-select-state"
              options={all_state}
              value={state}
              onChange={(event, selected_state) => {
                set_state(selected_state);
              }}
              classes={autocomplete_classes}
              renderInput={(params) => (
                <TextField {...params} label={"State"} margin="none" focused />
              )}
            />
          </div>
        </>
      )}

When the condition all_state.length > 0 is met, the AutoComplete component will be created.

But it will not be focused.

How to get it to be focused upon creation?