MUI autocomplete from a button

Question

I am creating an application where it is appropriate to have a selection menu appear from a button. Something like this:

import React from "react";
import AutoComplete from "@mui/material/Autocomplete";

autoOptions = [
  "pineapple",
  "strawberry",
  "mango",
  "banana",
  "watermelon",
  "grape",
  "peach",
  "kiwi",
  "apple"
];

export default function App() {
  return (
    <div>
      <AutoComplete
        id="combo-box-demo"
        options={autoOptions}
        sx={{ width: 300 }}
        renderInput={(params) => (
          <input type="button" value="Pick a fruit!" />
        )}
      />
    </div>
  );
}

The behavior I am wanting is that when the user clicks the input/button, a drop-down selection menu appears giving options, like the MUI Autocomplete component offers. The chief difference from the autocomplete component shown in the MUI documentation that I want is that instead of the closed autocomplete being rendered as a TextField, I want it to be rendered as a button, and clicking the button opens the autocomplete menu.

I've tried refs to components inside and outside the renderInput prop, I've tried different components in the renderInput prop, I've tried ChatGPT, I've tried slaughtering a goat and sprinkling it's blood on my computer, in all cases I seem to get either "inputRef.current is null" (which is odd because most of the time I never even declared inputRef and the MUI docs for this component never once mention an inputRef as part of this component) or "inputRef is undefined" (because I tried to assign inputRef.current), or a blank stare from an unmoved AutoComplete component that is totally and completely uninterested in focusing/opening for me.

This answer gets close, but the TextField renderInput is still present. I want this menu to appear as though it is dropping down from the Button itself.