Fetching React native contacts and sending it to backend to fetch existing user in app

Question

• Here i am fetching all contacts from user's device and formatting it all to pass in API. and some numbers are with country code and some are without country code. so here i also formatting all the contacts without country code. this process runs like 2-3 minutes and my final was like this Please suggest if i am doing this in wrong way. or any improvement will be appreciated. OR what's the best way to do this kind of time taking things silently without freezing the app. THANKS IN ADVANCE

   const contacts = [{fullname: "Mark", mobileNumber: "1234567890", cc: "+1"}, {...}, {...}]
  

And i pass this array straight to backend. here's my full code how i am getting and formatting it.

   const phoneNumberUtil = PhoneNumberUtil.getInstance();
  ContactServices.askForContactPermission((resolve) => {
    BusyIndicator.show()
    console.log("permission", resolve);
    getContacts().then((res) => {
      res.map((c) => {
        if (c?.phoneNumbers[0]?.number) {
          if (c?.phoneNumbers[0]?.number.includes("+")) {
            const phone_parse = phoneNumberUtil.parse(c?.phoneNumbers[0]?.number);
            const country_code = c?.phoneNumbers[0]?.number.includes("+") ? "+" + phone_parse.getCountryCode(c?.phoneNumbers[0]?.number) : ""
            const mobile = phone_parse.getNationalNumber(phone_parse);
            setContacts(prevState => [...prevState, { fullname: c?.givenName, mobileNumber: mobile.toString().replace(/\s/g, ''), cc: country_code }])
          } else {
            setContacts(prevState => [...prevState, { fullname: c?.givenName, mobileNumber: c?.phoneNumbers[0]?.number.toString().replace(/\s/g, ''), cc: "" }])
          }
        }
      })
getFriendsByContact() // my backend api call when i got all the contacts.
    }).catch((error) => {
      BusyIndicator.hide()
      console.log("error", error);
    })
  }, (reject) => {
    BusyIndicator.hide()
    console.log("permission", reject);
  })