Open time picker in Material UI Textfield type="time"

Question

So I have this code

<TextField
                    sx={{
                      width: "100%",
                      height: "auto",
                    }}
                    type="time"
                    InputLabelProps={{
                      shrink: true,
                    }}
                    inputProps={{
                      step: 60, // 1 min
                    }}
                    inputRef={timeRef}
                    value={logCleanRuntime}
                    helperText={
                      logCleanRuntimeError
                        ? "Log Clean Runtime field cannot be empty"
                        : ""
                    }
                    label="Log Clean Runtime"
                    error={logCleanRuntimeError}
                    fullWidth
                    onChange={(e) => {
                      setFormChanged(true);
                      setDirty();
                      setLogCleanRuntime(e.target.value);
                    }}
                  />

which gives me the following textfield

and currently, the browser time picker only opens when I click the clock icon on the right. How can I make it open whenever I click on the field itself/how can I take control of when it opens and closes?

I tried using timeRef.current.focus() but it did not work and I tried searching in Material UI's TextField API enter link description here but ended up finding nothing that may help.