Non-MUI component as renderInput prop of TimePicker (@mui/x-date-pickers)

Question

I have the following implementation of MUI's TimePicker:

<TimePicker
  value={time}
  inputFormat="HH:mm"
  views={["hours", "minutes"]}
  onChange={(newValue) => {
    newValue && setResultTime(newValue);
  }}
  renderInput={(props) => {
    console.log(props);
    return (
      <InputWrapper>
        <Input ref={props.inputRef} tw="w-16" />
        <FontAwesomeIcon
          icon={faAngleDown}
          tw="text-company-light-1 opacity-80 text-sm px-2 cursor-pointer"
        />
      </InputWrapper>
    );
  }}
/>

I am unable to use a controlled version of this by specifying isOpen because the outside click handler appears to fire when I click on the component and that causes it to close. That is, wrapping it in:

<OutsideClickHandler onOutsideClick={() => setTimePickerOpen(false)}>
...
</OutsideClickHandler>

causes it to close, even when clicking on the component itself.

The props to renderInput do not appear to contain an onClick and so I have no idea how to cause my component to respond to clicks. How can this be achieved?