Как отсортировать массив и сделать подмассив

Стоит задача отсортировать массив объектов по первым буквам алфавита на React. Должно получиться что-то подобное.

<div className="text-container">
  <h2 className="text-title">А</h2>
   <div className="text-subtitle-container">
    <p className="text-subtitle">Агафонов Максим</p>
    <p className="text-subtitle">Арефьев Ярослав</p>
   </div>
</div

<div className="text-container">
  <h2 className="text-title">Б</h2>
   <div className="text-subtitle-container">
    <p className="text-subtitle">Бурмайло Виталий</p>
   </div>
</div

В массиве объектов у каждого объекта есть несколько ключей. Интересуют только 2 - фамилия и имя. Фамилия идет вперед, а имя следующим. Также создаются контейнеры , как указано выше, с первой буквы фамилии в алфавитном порядке сверху-вниз. Поиск происходит по совпадению в значениях фамилии или имени , которое передается из инпута в виде обычной строки.

Как можно осуществить подобную задачу? Если как просто отсортировать массив по переданному запросу и по алфавиту я понимаю, то как сделать чтобы были контейнеры еще с фамилией-именем в разных местах по алфавиту не понимаю никак. Заранее благодарю за помощь.

Пример массива объектов , который нужно перебрать

[
      {
        "_id": "611e5bee6dbecd9b57cd7244",
        "author_firstName": "Ангелина",
        "author_lastName": "Пастернак",
        "title": "Августина и Степан",
        "city": "Санкт-Петербург",
        "year": 2021
      },
      {
        "_id": "611e5beea040b02068815775",
        "author_firstName": "Ангелина",
        "author_lastName": "Пастернак",
        "title": "Армии племен пустыни",
        "city": "Москва",
        "year": 2020
      },