Алгоритм сетки для сапера

Пишу на js игру сапер. Как мы знаем, при клике по определенной клеточке все клеточки которые касаются к ней проверяются на наличие мин и таким образом выводится подсказка или нет. Я задал массив из 100 клеточек и по средствам react отрендерил доску. Выглядит это дело примерно так:

11 12 13 14 15 16 17 18 19 20

21 22 23 24 25 26 27 28 29 30

.....

и тд.

Таким образом до 100 (прока пробная версия, 1,2,3 не включил для наглядности ибо текстовый редактор не позволяет размещать цифры дону под другой)

Для проверки срабатывания я повесил на событиет клика функцию которая окрашивает красным соприкасающиеся блоки с выбранным. Проблема заключается в том, что я не могу грамотно задать алгоритм по которому при выбере крайних значений, пометка красным переносится на другую строку. (если например выбрал 20 то в ответ придет 9, 10 , 11, 19 , 20, 21, 29, 30, 31)

Прошу помощи, как избежать данного переноса? Если есть идеи как концептуально изменить принцип работы поля тоже будет полезно.