Err: A component is changing the uncontrolled value state of Autocomplete to be controlled

Question

I have this autocomplete field which functions as an employee search. When I load a pre existing document, I cannot display an employee name in the field. I get the error message A component is changing the uncontrolled value state of Autocomplete to be controlled. How can this be fixed?

const { onChange, badge, taxonomyid, label, id, style } = props;
const [employees, setemployees] = useState([]);
const onNameChange = async (e) => {
    e.preventDefault();
    var value = e.target.value;
    var url = `/api/employeesearch?taxonomyid=${taxonomyid}`;
    if (value) {
        url = url + `&search=${value}`;
        const resp = await fetch(url);
        const emp = await resp.json();
        if (resp.ok) {
            setemployees(emp);
        } else {
            return [];
        }
        console.log(value);
    }
};

const onBadgeChange = (e, value) => {
    e.preventDefault();
    onChange(e, value);
};
...
<Autocomplete
    value={employees.employees.Name}
    inputValue={employees.employees.Name}
    onChange={(e, value) => onBadgeChange(e, value)}
    onInputChange={(e) => onNameChange(e)}
    options={employees.employees}
    getOptionLabel={(option, i) => option.Name}
    filterOptions={(x) => x}
    id={id || "Person"}
    renderInput={(params) => <TextField {...params} id={id || "Person"} label={label} variant="outlined" />}
/>