How to modify a nested object in React?

Question

I’m having trouble modifying the properties of the address, the way it is I can only change the name up to the phone, could someone tell me a way to modify them?

 const dataInit = {
    name: '',
    email: '',
    cnpj: '',
    phone: '',
    address: {
      state: '',
      city: '',
      district: '',
      zip: '',
      obs: ''
    }
  }

  const [clinic, setClinic] = useState(dataInit);
  const onChange = (event) => {
    const { name, value } = event.target;
    setClinic({...clinic, [name]: value });
  }

  const onSubmit = () => {
    const newClinic = {
      name: clinic.name,
      email: clinic.email,
      cnpj: clinic.cnpj,
      phone: clinic.phone,
      address: clinic.address
    }
    props.addClinic(newClinic);
  }

Answer 1

wouldn’t be like this ?

const onSubmit = () => {
    const newClinic = {
      name: clinic.name,
      email: clinic.email,
      cnpj: clinic.cnpj,
      phone: clinic.phone,
      address: {
       state: clinic.address.state,
        .... 
       }
    }
    props.addClinic(newClinic);
  }