Сергей Зенькович

Нашла такую штуку.
Если вы, как и я используете библиотеку Material UI, то у нее есть компонент

<ClickAwayListener onClickAway={handleClose}> </ClickAwayListener>

который позволяет слушать клики вне компонента.

img {display: block;}

Для справки. Тег img по умолчанию инлайновый, поэтому на него действует в т.ч. вертикальное выравнивание в контейнере, которое тоже по умолчанию в большинстве браузеров baseline. Строго говоря, можно использовать и vertical-align: bottom или line-height: 0(и прочее обнуление) для удаления этого отступа, но вариант с display: block чаще всего практичней.

элементарно: не завязываться на ид.
у любого элемента на странице всегда будет какой-то уникальный для него параметр: специфический атрибут/положение относительно родителя(ей)/и всё такое.

всё это элементарно решается икспасом, если в него уметь.

.features-description img.first-arrow  {
  position: absolute;
  left: 100%;
  top: 5%;
}

Ты ищешь класс .features-description в котором есть класс .first-arrow в котором img, Но тебе надо искать img с классом img.first-arrow

А лучше просто искать класс

.first-arrow  {
  position: absolute;
  left: 100%;
  top: 5%;
}