I’m working on setting up the server now. I want to make it possible to edit my form. With the usual functionality, everything works fine, when you just need to add an address, POSTs are sent and the data is updated. But when it comes to changing the data that I previously passed to initialData, problems begin. onSubmit simply refuses to compile, although I checked the arrival of data 100 times and initialData passes all the data for initialization.

const AddPointMap = ({ isOpen, onClose, onSubmitAddress, center, type, typeOfButton, initialData }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [loadError, setLoadError] = useState(null);
  const [marker, setMarker] = useState(null);
  const [capacityValue, setCapacityValue] = useState('');

  const loader = new Loader({
    apiKey: GOOGLE_MAPS_API_KEY ?? '',
    version: 'weekly',
    libraries,
    id: 'google-map-script',
  });

  const { register, handleSubmit, setValue, control, formState: { errors }, reset } = useForm();
  const [selectedValue, setSelectedValue] = useState(null);

  useEffect(() => {
    if (initialData) {
      console.log('Initial Data:', initialData);
      setValue('name', initialData.Name || '');
      setValue('comment', initialData.Comment || '');
      setValue('primaryFirstName', initialData.PrimaryFirstName || '');
      setValue('primaryLastName', initialData.PrimaryLastName || '');
      setValue('primaryPhonNumber', initialData.PrimaryPhonNumber || '');
      setValue('capacity', initialData.Capacity || '');
      setMarker({
        lat: initialData.Lat || 0,
        long: initialData.Long || 0,
      });
      setCapacityValue(initialData.Capacity || '');
    } else {
      reset({
        name: '',
        capacity: '',
        comment: '',
        primaryFirstName: '',
        primaryLastName: '',
        primaryPhonNumber: '',
        select: '',
      });
      setMarker(null);
      setCapacityValue('');
    }
  }, [isOpen, initialData, reset, setValue, control]);
  
  
  const onSubmit = async (data) => {
    console.log(data);
    const completeData = {
      name: data.name,
      lat: marker?.lat || 0,
      long: marker?.long || 0,
      capacity: data.capacity,
      comment: data.comment,
      primaryFirstName: data.primaryFirstName,
      primaryLastName: data.primaryLastName,
      primaryPhonNumber: data.primaryPhonNumber,
      type: type === 'Oil' ? '1' : '2'
    };
  
    let result;
    if (initialData) {
      result = await updateCompanyLocation(initialData.Id, completeData); // Обновление адреса
    } else {
      console.log(completeData);
      result = await createCompanyLocation(completeData); // Создание нового адреса
    }
  
    if (result.success) {
      onSubmitAddress(result.data);
    } else {
      console.error(result.message);
    }
  
    onClose();
    reset();
    setMarker(null);
    setValue("primaryPhonNumber", "");
    setValue('capacity', '');
  };
  

  useEffect(() => {
    loader
      .load()
      .then(() => setIsLoaded(true))
      .catch((error) => setLoadError(error));
  }, [loader]);

  const handleMapClick = useCallback((event) => {
    const lat = event.latLng.lat();
    const long = event.latLng.lng();
    setMarker({ lat, long });
  }, []);

  const onCancel = () => {
    onClose();
    reset();
    setMarker(null);
    setSelectedValue(null);
  };

  if (loadError) {
    return <div>Error loading Google Maps</div>;
  }

  if (!isLoaded) {
    return <div>Loading Google Maps...</div>;
  }

  return (
    <>
      <Modal
        isOpen={isOpen}
        onRequestClose={onClose}
        contentLabel="Add Operational Address"
        ariaHideApp={false}
        style={{ 
          overlay: { backgroundColor: 'rgba(31, 34, 41, 0.8)' }, 
          content: { borderRadius: '10px' }  
        }}
      >
        <div className={styles.title}>
          <h2>{type} {type === "Oil" ? 'Container Location' : 'Location'}</h2>    
          <button onClick={onClose}><IoClose size={34}/></button>
        </div>
        <GoogleMap
          id="google-map"
          mapContainerStyle={containerStyle}
          center={center}
          zoom={16}
          onClick={handleMapClick}
        >
          {marker && (
            <OverlayView
              position={{ lat: marker.lat, lng: marker.long }}
              mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
            >
              <FaMapMarkerAlt size={24} />
            </OverlayView>
          )}
        </GoogleMap>
      <form className={styles.dialogForm} onSubmit={handleSubmit(onSubmit)}>
        <label className={styles.smallText}>{type} Location Name:</label>
          <input 
            className={`${styles.formInput} ${errors.name && styles.inputError}`} 
            placeholder="Enter name" 
            {...register("name", { required: true })}
          />
          <label className={styles.smallText}>Location coordinates:</label>
          { marker && (
            <div className={styles.selectAdress}>
              {marker.lat}, {marker.long}
            </div>
          )}
          {!marker && (
            <>
              <input 
                className={`${styles.formInput} ${errors.selectAdress && styles.inputError}`} 
                type="text" 
                placeholder="Put a point on the map" 
                disabled={true}
                {...register("selectAdress", { required: true })}
              />
            </>
          )}
          <label className={styles.smallText}>{type === 'Oil' ? 'Coocking Oil' : 'Grease Trap'} Capacity:</label>
          <div className={errors.capacity && styles.inputError}>
            <Controller
              name="capacity"
              control={control}
              rules={{ required: true }}
              render={({ field }) => (
                <CustomSelector
                  options={options}
                  select={type === 'Oil' ? 'Oil Capacity' : 'Trap Capacity'}
                  selectValue={(value) => {
                    setSelectedValue(value);
                    field.onChange(value);
                  }}
                  initialValue={capacityValue}
                />
              )}
            />
          </div>
          <label className={styles.smallText}>{type === 'Oil' ? 'Oil' : 'Trap'} Location Comments:</label>
          <textarea 
            className={`${styles.textareaInput} ${errors.comment && styles.inputError}`} 
            placeholder="Enter text" 
            rows="6" 
            {...register("comment", { required: true })} 
          />
          <label className={styles.smallText}>Primary contact person:</label>
          <div className={styles.personInput}>
            <input 
              className={`${styles.formInput} ${errors.primaryFirstName && styles.inputError}`} 
              type="text" 
              placeholder="First Name" 
              {...register("primaryFirstName", { required: true })} 
            />
            <input 
              className={`${styles.formInput} ${errors.primaryLastName && styles.inputError}`} 
              type="text" 
              placeholder="Last Name" 
              {...register("primaryLastName", { required: true })} 
            />
          </div>
          
          <label className={styles.smallText}>Contact number:</label>
          <Controller
            name="primaryPhonNumber"
            control={control}
            rules={{ required: true }}
            render={({ field }) => (
              <PhoneInput
                {...field}
                className={errors.primaryPhonNumber ? styles.numberInputError : styles.numberInput}
                defaultCountry="US"
                placeholder="Enter phone number"
                onChange={(value) => {
                  console.log('Phone Number Changed:', value);
                  field.onChange(value);
                }}
                limitMaxLength={10}
              />
            )}
          />
          
          <div className={styles.submitButtons}>
            <button className={styles.cancel} type='button' onClick={onCancel}>Cancel</button>
            <button type="submit">Add {typeOfButton} <GoPlusCircle size={24} /></button>
          </div>
        </form>
      </Modal>
    </>
  );
};

export default React.memo(AddPointMap);

I checked console.log() and tried to wrap handleSubmit in other functions in which to call onSubmit