React admin AutoCompleteInput set value problem

Question

Hi I'm designing an edit page using react admin. When I view the page, I set the previously saved data to the elements and want them to be selected. But AutocompleteInput does not work properly. As soon as the data is set, it constantly sends requests to the API. What is the problem?

Note: I tried removing the async and timer in acInputValueChange, but it didn't solve it.

let timer;

const EditUserAc: FC<Props> = ({ onCancel, ...props }) => {
  const dp = useDataProvider();
  const [employeList, setEmployeList] = React.useState([]);
  const [acMasterList, setAcMasterList] = React.useState([]);
  const [selectedEmployee, setSelectedEmployee]: any = React.useState();
  const [previousData, setPreviousData]: any = React.useState();
  const [selectedAc, setSelectedAc]: any = React.useState();
  // const [isAcSelected, setIsAcSelected] = React.useState(false);
  // const [isUserSelected, setIsUserSelected] = React.useState(false);
  const notify = useNotify();


  React.useEffect(() => {
    (async function () {

      let employeList: any = await dp.RoleUsers("xapi");
      if (employeList) {
        employeList = employeList.data.Result
          .sort((a, b) => (a.FIRST_NAME > b.FIRST_NAME) ? 1 : -1)
          .map((x) => {
            return {
              id: x.REGISTER_ID,
              name: `${x.FIRST_NAME} ${x.LAST_NAME}`,
              fullName: `${x.FIRST_NAME} ${x.LAST_NAME}`
            };
          });

        setEmployeList(employeList);
      }

      let resultUserAc: any = await dp.getOne("userac", {
        id: props.id ? parseInt(props.id) : 0,
      });
      if (resultUserAc) {
        setPreviousData(resultUserAc.data);
        const selectedEmployee: any = employeList.find((employee: any) => employee.id === resultUserAc.data.employeeId);
        setSelectedEmployee(selectedEmployee);

        acInputValueChange(resultUserAc.data.ac);
        handleAcChange(resultUserAc.data.ac);

        const selectedAc: any = acMasterList.find((ac: any) => ac.id === resultUserAc.data.ac);
        setSelectedAc(selectedAc);
      }

    })();
  }, []);

  const handleEmployeeChange = (employeeId: any) => {
    //setIsUserSelected(!!employeeId); 
    const selectedEmployee: any = employeList.find((employee: any) => employee.id === employeeId);
    if (selectedEmployee) {
      setSelectedEmployee(selectedEmployee);
    }
  };


  const UserAcSaveButton = (props: any) => {
    const formState = useFormState();
    return <SaveButton label="Kaydet"
      {...props} handleSubmitWithRedirect={() => props.handleSave(formState)} />;
  };

  const handleSave = async (formState) => {
    formState.values.fullName = selectedEmployee.fullName;
    formState.values.ac = selectedAc.id;
    await dp.update("userac",
      {
        id: props.id ? parseInt(props.id) : 0,
        data: { ...formState.values },
        previousData: previousData,
      });
    notify('Öğe Güncellendi');
  };


  const handleAcChange = (acId: any) => {
    console.log(acId);
    setSelectedAc({ id: acId, name: acId });
    clearTimeout(timer);
  };

  const acInputValueChange = (e) => {
    if (e)
      (async function () {
        clearTimeout(timer);

        if (e && e.length > 2) {
          let acMasters: any = await dp.getList("acmasters", {
            pagination: { page: 1, perPage: 50 },
            sort: { field: "id", order: "DESC" },
            filter: { id__eq: e, },
          });

          if (acMasters) {
            acMasters = acMasters.data
              .map((x) => {
                return {
                  id: x.ac,
                  name: x.ac
                };
              });
            setAcMasterList(acMasters);

            const selectedAc: any = acMasters.find((ac: any) => ac.id === e);
            setSelectedAc(selectedAc);


          }
        }

      })();
  };





  return (
    <Fragment>
      <Breadcrumbs aria-label="breadcrumb">
        <Link2 color="inherit" href="/main">
          Main Page        </Link2>
        <Typography color="textPrimary">Ac Edit</Typography>
      </Breadcrumbs>

      <Create {...props}  >
        <SimpleForm redirect="create" toolbar={
          <Toolbar>
            <UserAcSaveButton label="Save" handleSave={handleSave} />
          </Toolbar>
        }>
          <SelectInput
            label="User"
            alwaysOn
            source="employeeId"
            choices={employeList}
            optionText="name"
            optionValue="id"
            onChange={(e) => handleEmployeeChange(e.target.value)}
            validate={required()}
            defaultValue={selectedEmployee?.id}
          />
          {/* <SelectInput
          label="AC"
          alwaysOn
          source="ac"
          choices={AcMasterList}
          onChange={(e) => handleAcChange(e.target.value)}
          optionText="name"
          optionValue="id"
          validate={required()}
          defaultValue={selectedAc?.id}
        /> */}

          <AutocompleteInput
            optionText="name"
            optionValue="id"
            validate={required()}
            label="Ac" 
            alwaysOn
            variant="standard"
            source="ac"
            defaultValue={selectedAc?.id}
            choices={acMasterList}
            onInputValueChange={acInputValueChange}
            onChange={handleAcChange}
            resettable
          />

        </SimpleForm>
      </Create>
    </Fragment>
  );
};

interface Props extends EditProps {
  onCancel: () => void;
}

export default EditUserAc;

want the data to be set and not to make repeated requests to the API. There is a problem with the <AutocompleteInput element. The dp.getList("acmasters") in the acInputValueChange method is constantly sending requests to the API.