How can I sort a nested array?

Question

I'm having issues sorting a nested array of objets. I need to group the searched results by continent or languages, but i'm confused. This is my code (data comes from GraphQL, but I don't have a filter option in the API so I need to sort the data by myself).

  const [searchedCountry, setSearchedCountry] = useState(null)
  const [searchValue, setSearchValue] = useState("")
  const [orderBy, setOrderBy] = useState('Continent')
  const [loading, setLoading] = useState(false)
  const [noResults, setNoResults] = useState(true)

  const {error, data:allCountriesData} = useGetAllCountries()


  const handleSearch = (e) => {
    setSearchValue(e.target.value)
  }

  useEffect(() => {
    if (searchValue.length === 0) {
      setSearchedCountry(null)
    } else {
      setLoading(true)
      const newFilter = allCountriesData.countries.filter((value) =>(
        value.name.toLowerCase().startsWith(searchValue.toLowerCase())
      ))
      if (newFilter.length === 0) {
        setNoResults(true)
        setSearchedCountry(null)
      } else {
        setNoResults(false)
        setSearchedCountry(newFilter)
      }
      setLoading(false)
    }
  }, [searchValue, allCountriesData])


  const handleOrder = (e)=> {
    setOrderBy(e.target.value)
  }

  return (
    <div className="home_container">

      <div className='home_title_container'>
        <h1 className='home_title'>COUNTRY SEARCH</h1>
        <img src={shiba} alt="shiba" />
      </div>

      <p className='home_subtitle'>The most used search app to find information about any country.</p>

      <div className="search-box">
        <input type="text" className="input-search" placeholder="Enter country name" value={searchValue} onChange={handleSearch}/>
      </div>

      <div className="orderby_container">
        <div className="orderby" onChange={handleOrder}>
          <input type="radio" name="select" id="continent" value='Continent' checked={orderBy === 'Continent'}/>
          <input type="radio" name="select" id="language" value='Language' checked={orderBy === 'Language'}/>
            <label htmlFor="continent" className="option continent">
              <div className="dot"></div>
                <span>Continent</span>
                </label>
            <label htmlFor="language" className="option language">
              <div className="dot"></div>
                <span>Language</span>
            </label>
        </div>
      </div>

      {error && <div>Error</div>}
      {noResults && <NoResults/>}

      {loading && <Spinner/>}

      {searchedCountry && <CountryCard countries={searchedCountry}/>}

    </div>
  )
}


Array example:
"data": {
    "countries": [
      {
        "capital": "Andorra la Vella",
        "code": "AD",
        "currency": "EUR",
        "emoji": "🇦🇩",
        "name": "Andorra",
        "phone": "376",
        "continent": {
          "name": "Europe"
        },
        "languages": [
          {
            "name": "Catalan"
          }
        ]
      },
      {
        "capital": "Abu Dhabi",
        "code": "AE",
        "currency": "AED",
        "emoji": "🇦🇪",
        "name": "United Arab Emirates",
        "phone": "971",
        "continent": {
          "name": "Asia"
        },
        "languages": [
          {
            "name": "Arabic"
          }
        ]
      },
      {
        "capital": "Kabul",
        "code": "AF",
        "currency": "AFN",
        "emoji": "🇦🇫",
        "name": "Afghanistan",
        "phone": "93",
        "continent": {
          "name": "Asia"
        },
        "languages": [
          {
            "name": "Pashto"
          },
          {
            "name": "Uzbek"
          },
          {
            "name": "Turkmen"
          }
        ]
      },

I'm having issues sorting a nested array of objets. I need to group the searched results by continent or languages, but i'm confused. This is my code (data comes from GraphQL, but I don't have a filter option in the API so I need to sort the data by myself).