Обновить хранилище zustand в событии onChange, создать задержку ввода

У меня возникла проблема с задержкой ввода, когда я пытаюсь установить состояние переменной zustand в событии onChange.

const BuildOrder = (props: { setOpen: Function }) => {
  const { almacenes, isLoadingAlmacenes } = useGetAlmacenes();
  const { articlesRes, isLoadingArticles } = useGetArticlesBySearch();
  const {
    warehouseSelected,
    setWarehouseSelected,
    setArticles,
    articles,
    setArticlesFetched,
    articlesFetched,
    setSearch,
  } = useDirectlyPurchaseRequestOrderStore(
    (state) => ({
      warehouseSelected: state.warehouseSelected,
      setWarehouseSelected: state.setWarehouseSelected,
      setArticles: state.setArticles,
      articles: state.articles,
      setArticlesFetched: state.setArticlesFetched,
      articlesFetched: state.articlesFetched,
      setSearch: state.setSearch,
    }),
    shallow
  );
  const [articleSelected, setArticleSelected] = useState<Article | null>(null);
  const [amountText, setAmountText] = useState('');
  const [warehouseError, setWarehouseError] = useState(false);
  const [articleError, setArticleError] = useState(false);`your text`
  const [amountError, setAmountError] = useState(false);

  if (isLoadingAlmacenes)
    return (
      <Box sx = {{ display: 'flex', flex: 1, justifyContent: 'center', p: 6 }}>
        <CircularProgress size = {40} />
      </Box>
    );
  return (
    <Stack sx = {{ display: 'flex', flex: 1, mt: 2 }}>
      <Stack sx = {{ display: 'flex', flex: 1, maxWidth: 300 }}>
        <Typography sx = {{ fontWeight: 500, fontSize: 14 }}>Seleccionar almacén</Typography>

        <TextField
          select
          label = "Almacén"
          size = "small"
          error = {warehouseError}
          helperText = {warehouseError && 'Selecciona un almacén'}
          value = {warehouseSelected}
          onChange = {(e) => {
            setWarehouseError(false);
            setWarehouseSelected(e.target.value);
          }}
        >
          {almacenes.map((warehouse) => (
            <MenuItem key = {warehouse.id} value = {warehouse.id}>
              {warehouse.nombre}
            </MenuItem>
          ))}
        </TextField>
      </Stack>
      <Divider sx = {{ my: 2 }} />
      <Box
        sx = {{
          display: 'flex',
          flex: 1,
          justifyContent: 'space-between',
          columnGap: 2,
          flexDirection: { xs: 'column', sm: 'row' },
          rowGap: { xs: 2, sm: 0 },
        }}
      >
        <Stack sx = {{ display: 'flex', flex: 1 }}>
          <Typography sx = {{ fontWeight: 500, fontSize: 14 }}>Seleccionar articulo</Typography>
          <Autocomplete
            disablePortal
            fullWidth
            filterOptions = {filterArticleOptions}
            onChange = {(e, val) => {
              e.stopPropagation();
              setArticleSelected(val);
              setArticleError(false);
            }}
            loading = {isLoadingArticles && articlesFetched.length === 0}
            getOptionLabel = {(option) => option.nombre}
            options = {articlesFetched}
            value = {articleSelected}
            noOptionsText = "No se encontraron artículos"
            renderInput = {(params) => (
              <TextField
                {...params}
                error = {articleError}
                helperText = {articleError && 'Selecciona un articulo'}
                placeholder = "Artículos"
                sx = {{ width: '50%' }}
                onChange = {(e) => {
                  setSearch(e.target.value);
                }}
              />
            )}
          />
        </Stack>

В этом автозаполнении я динамически визуализирую свои статьи, я визуализирую входное TextField для управления состоянием поиска для отображения нескольких элементов, когда я пишу в своем TextField, это обновляет мое хранилище значений в событии onChange, но это создает задержку ввода в textField и выглядит такой тормозной.

export const useGetArticlesBySearch = () => {
  const [isLoadingArticles, setIsLoadingArticles] = useState(true);
  const [articlesRes, setArticles] = useState<Article[]>([]);
  const search = useDirectlyPurchaseRequestOrderStore(useShallow((state) => state.search));

  useEffect(() => {
    const fetchData = async () => {
      setIsLoadingArticles(true);
      try {
        const res = await getArticlesBySearch(search);
        setArticles(res);
      } catch (error) {
        console.info(error);
      } finally {
        setIsLoadingArticles(false);
      }
    };
    fetchData();
  }, [search]);
  return { isLoadingArticles, articlesRes };
};

Я называю здесь состояние стоимости моего магазина поиском по статьям.

Я решил проблему, создав useState и опору для моего пользовательского крючка, но я хочу знать, есть ли другой способ сделать это только с помощью zustand?

Я пытался узнать, есть ли способ указать переменную хранилища zustand и избежать задержки ввода в текстовом поле.