Javascript – How to propagate child component changes to the parent (or refresh it) component in React?

I have a page that passes a client item to a component, this component then passes the client item to its child component. This child component edits the client item. How can I make the child’s edits go directly to the parent item? Currently, after the edits in NewContactModal.jsx, the parent component is not affected and shows the data it had previously pulled.

Here is my code:

// Sale_resume.jsx
const { sale, selectedItems, setTotals, setCustomer } = useContext(SaleContext)

<ContactInfoModal
  client={sale.customer}
  show={showContactInfoModal}
  handleClose={handleCloseContactInfoModal}
/>

// ContactInfoModal.jsx
const ContactInfoModal = ({ client, show, handleClose, refreshContactList  }) => {
  // ...
  <p className='m-0 fw-bold'>Nome</p>
  <p>{client.short_name}</p>
  <p className='m-0 fw-bold'>CPF/CNPJ</p>
  <p>{client.federal_tax_id}</p>
  <NewContactModal
    contact={client}
    show={updateContactModalShow}
    handleClose={handleCloseUpdateContactModal}
  />
  // ...
}

// NewContactModal.jsx
const NewContactModal = ({ show, handleClose, contact, getContacts }) => {
  const handleSubmit = async () => {
    // ...
    let response = {}
    if (contact) {
      response = await gestupApi.putContact(contact.id, { name, federalTaxId, address, neighborhood, number, zip, complement, selectedState, selectedCity, phoneNumber, email, suframa, stateTax, cityTax, contributorType, channel, birthDate })
    } else {
      response = await gestupApi.postContact({ name, federalTaxId, address, neighborhood, number, zip, complement, selectedState, selectedCity, phoneNumber, email, suframa, stateTax, cityTax, contributorType, channel, birthDate })
    }
    if (response.code == 200) {
      resetStates()
      getContacts ? getContacts() : ""
      contact ? toast.success("Contato atualizado com sucesso") : toast.success("Contato criado com sucesso")
    } else {
      contact ? toast.error("Falha ao atualizar o contato") : toast.error("Falha ao criar o contato")
    }
    handleClose()
  }
  // ...
  <div className="form-group">
    <label className="control-label" id="full_name_label">{contributorType == "COMPANY" ? "Razão Social*" : "Nome*"}</label>
    <input type="text" className='form-control' maxLength={60} onChange={(e) => setName(e.target.value)} value={name} />
  </div>
  <button className='btn btn-gestup' disabled={isDisabled} onClick={() => { handleSubmit() }}>Confirmar</button>
  // ...
}