State resets when values change in an object, only when I populate from another source

What I'm trying to do is the following:

1. I want to select a single card view and edit it
2. After editing it, I would like to save the changes

Please look at video I've upload for reference and could please explain what's going on, why is this happening. Is there a better way to do this without writing t0o much code as the state has a huge variable list and writing each variable will be time consuming.

This is my default useState where all values will be stored temporarily:

  const [business, setBusiness] = useState<Partial<BusinessInterface>>({});

And the function to populate the state above is as follows:

  const editHandler = async (e: any) => {    let editBusiness = await businessArray.businesses?.find(x =>      x.businessId?.equals(e),    );    console.log(e);    if (editBusiness) {      setBusiness(editBusiness);      setEditBusiness(true);      setModal(true);    }  }

However, the moment I start entering values, my state will clear the old state plus my change functions are all correct. please take a look at registrationNumberHandler

  const registrationNumberHandler = (    e: NativeSyntheticEvent<TextInputChangeEventData>,  ) => {    let value = e.nativeEvent.text;    setBusiness({...business, registrationNumber: value});  }

But however, when I change editHandler to as follows, it will work and my state will not change or clear the value when I edit a certain text field.

  const editHandler = async (e: any) => {    let editBusiness = await businessArray.businesses?.find(x =>      x.businessId?.equals(e),    );    if (editBusiness) {      setBusiness({...business, name: editBusiness.name, registrationNumber: editBusiness.registrationNumber); // a short example, when text fields changes state will retain its values      setEditBusiness(true);      setModal(true);    }  }