How to wait for useState to finish before setting useRef value?

<form
  onSubmit={(e) => {
    e.preventDefault();
    const newTopCategoryVal = newTopCategory.current;
    if (!newTopCategoryVal) return;
    setCategories((prev) => [...prev, { name: newTopCategoryVal.value, subFilters: [] }]);
    newTopCategoryVal.value = "";
    newTopCategoryVal.blur();
  }}
  onFocus={() => { setActiveCategory(-1); setActiveSubCategory(-1) }}
  >

<form
  onSubmit={(e) => {
    e.preventDefault();
    const newSubCatInput = newSubCategory.current;
    if (!newSubCatInput || newSubCatInput.value.trim().length < 1) return;
    setCategories((prev) => {
       const oldCategories = Array.from(prev);
      const categoryToEdit = oldCategories[activeCategory];
      if (!categoryToEdit) return oldCategories;
      oldCategories.splice(activeCategory, 1, {
        ...categoryToEdit,
        subFilters: [...categoryToEdit.subFilters, newSubCatInput.value],
     });
      return oldCategories;
      }
    );
  newSubCatInput.value = "";
  newSubCatInput.blur();
  }}
>