Partial typescript does not update paylaod correctly

Question

I’m studying typescript, I created an application in Angular, I have a mix of interfaces:

Interface files.ts
    export interface Address {
       id: string,
       error: AddressError,
       formData: FormData,
       addressData: AddressData,
       documentsData: DocumentsData
    }

    export interface AddressData {
        profissionais: AddressProfissional;
    }

    export interface AddressProfissional {
        typeA: AddressTypeA[];
        typeB: AddressTypeB[];
    }

    export interface AddressTypeA {
     name: string;
     surname: string;
     address: string;
     city: string;
     country: string;
    }

I created a service, where save the state in a store(Redux), before sending final paylaod with all data to the back end. service ts.

submitAddress(data: Partial<Address>) {
  this.addressStore(state => {
    return({
    ...state,
    ..data
  }
}

Angular Component.ts

submit(): void {

   console.log(form.value); // {name: 'Joe', surname:'Smith'}
   this.addressService.submitAddress(form.value)
}

App is composed of a set of screens, where on the first screen I have a form with name and surname, on the next screen I have a form address and by final form with City & Country.

In the first screen when filling the data and doing Ubmit send an object {name: 'Joe', surname:'Smith'},

by calling the service submitAddress(date: Partial), the state store, gets the added data and do not update the properties correctly, someone could help me with Partial, would like to update the name and surname properties inside paylaod.

payLoad= {
addressData {
     name: '',
     surname: '',
     address: '',
     city: '',
     country: '',
}
name: 'Joe',
surname: 'Smith'
}