You could probably try to extract from the cuomponent what is making it specific, so ti remains generic but still has the ability to see customisation injected into it ? The code below might not all be right but it's the general idea that matters

const [ firstName, setFirstName] = useState('')

const  handleChange = (event, newValue) => {
if (typeof newValue === "string") {
      setFirstName(newValue);
    } else if (newValue && newValue.inputValue) {
     // Create a new value from the user input
      setFirstName(newValue.inputValue);
    } else {
      setFirstName(newValue);     }
        }
}

const handleOptionLabel = (option) => {
// Value selected with enter, right from the input
          if (typeof option === "string") {
            return option;
          }
          // Add "xxx" option created dynamically
          if (option.inputValue) {
            return option.inputValue;
          }
          // Regular option
          return option.firstName;
        }
}

const handleRenderOption = (props, option) => {
<li {...props}>{option.firstName}</li>
}

const handleRenderInput = (params) =>{
<TextField {...params} label="First Name" />
}

 <Autocomplete
        required
        value={firstName}
        onChange={handleCHange}
        selectOnFocus
        clearOnBlur
        handleHomeEndKeys
        id="free-solo-with-text-demo"
        options={data}
        getOptionLabel={handleOptionLabel}
        renderOption={handleRenderOption}
        sx={{ width: 300 }}
        freeSolo
        renderInput={handleRenderInput}
      />