Zakiberbullenii

e: React.ChangeEvent<HTMLInputElement>

но если ты создаешь функцию прямо в пропсе элемента (как в примере из вопроса), то тип для e можно не указывать - функция протипизируется "снаружи".

https://restcountries.com/#api-endpoints-v2-all

Пример
https://restcountries.com/v2/name/andorra

[{
    "name": "Andorra",
    "topLevelDomain": [".ad"],
    "alpha2Code": "AD",
    "alpha3Code": "AND",
    "callingCodes": ["376"],
...
    "borders": ["FRA", "ESP"], // коды стран
    "nativeName": "Andorra",
...
}]

"Долгие загрузки" можно понять когда данные или выполнение какого-либо скрипта уже завершены. Так что вывод прелоадера в таких ситуациях не имеет смысла.

По идеи вы должны при запросе запускать прелоадер, а после завершения загрузки данных его убирать. В списках же лучше сделать так, что бы не подгружались все данные (если их большое количество). Лучше использовать список с поиском (плагинов для JQ, фреймворков и т.п. очень много), либо делать дозагрузку если список был просмотрен полностью.
В случае каких-либо данных (новости, блоги, публикации и т.п.) лучше разделять пагинацией.

Задайте каждому блоку какой-нибудь условный data-id="..." и считывайте значение этого атрибута

Можно искать индекс кликнутого блока в коллекции дочерних элементов в свойстве Element.children родительского div'а:

<div data-index="1">1</div>
<div data-index="2">2</div>

document.querySelectorAll("div").forEach((item) =>
  item.addEventListener("click", (e) => {
    console.log(e.target.dataset.index);
  })
);