Уменьшите сетку до 9 квадратов размером 3×3. После выбора квадрата отключайте все остальные, кроме квадратов сверху, снизу, слева и справа от выбранного. Доступные соседние квадраты должны оставаться красными, и на них можно переключиться. Учитывайте границы сетки.

Определяйте соседей по манхэттенскому расстоянию между строкой и столбцом: оно должно быть равно 1, а не просто по разнице индексов.

Пример React; до первого выбора доступны все, выбранная клетка выделена отдельно:

function Grid() {
  const [selected, setSelected] = useState(null);
  const adjacent = (a, b) => Math.abs(Math.floor(a / 3) - Math.floor(b / 3))
    + Math.abs(a % 3 - b % 3) === 1;
  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 60px)', gap: 8 }}>
    {Array.from({ length: 9 }, (_, i) => {
      const disabled = selected !== null && i !== selected && !adjacent(i, selected);
      return <button key={i} type="button" disabled={disabled}
        aria-label={`Клетка ${i + 1}`} aria-pressed={selected === i}
        onClick={() => setSelected(i)}
        style={{ width: 60, height: 60, background: disabled ? '#888' : selected === i ? '#5546b8' : '#c83232' }} />;
    })}
  </div>;
}

useState импортируют из React. Так клетки 2 и 3 при нумерации с нуля не считаются соседями через границу строки.