Material UI autocomplete from a button

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.

Since it seems no one is answering this one, the answer I came up with (just in case anyone stumbles across this with the same question)

Use a popper, and then embed the Autocomplete component into the popper.

import React, { useContext } from 'react';
import { Popper, Box, List, ListItemButton, Autocomplete, TextField } from '@mui/material';

import AppDataContext from '../SupportingModules/AppDataContext';
import filterSocket from '../SupportingModules/FilterSocket';


function TagPopperContent(props) {
    const tagOptions = ['my', 'list', 'of', 'tags'];

    return(
        <Autocomplete
            options={tagOptions}
            renderInput={(params) => (
                <TextField
                    {...params}
                    variant='outlined'
                />
            )}
        />
    )
};

function AddTagPopper(props) {
    const id = open ? 'simple-popper' : undefined;

    return(
        <Popper id={id} open={props.open} anchorEl={props.anchorEl} sx={{ zIndex: 1200 }}>
            <Box>
                <TagPopperContent {...props}/>
            </Box>
        </Popper>
    )
};

This doesn't help with the initial issue I was trying to solve in that the popper itself does not close on click-away, but it did give me all the functionality of the Autocomplete component, coming from any anchor element I choose (for my use case, this happens to be a button).

If you have questions about my solution (either as someone also looking to solve this problem, or as someone looking to give some good advice) please let me know! I'm sure there are more robust solutions than this one (that maybe implement close on click-away like I wanted in the first place)!