Переместитесь вниз к следующему ближайшему элементу Flexbox между рядами?

Question

У меня есть список коробок, которые я показываю рядом друг с другом в упакованном гибком контейнере. Пользователи могут перемещаться по ним и go к предыдущему / следующему полю, нажимая кнопки. Текущее выбранное поле отображается другим цветом:

import React, { useState } from "react"
import styled from "styled-components"

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${props => (props.selected ? `red` : `blue`)};
  margin: 10px;
`

const Wrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
`
const Test = () => {
  const boxes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  const [selected, setSelected] = useState(0)

  return (
    <>
      <button
        onClick={() => {
          setSelected(selected + 1)
        }}
      >
        Next item
      </button>
      <button
        onClick={() => {
          // ??
        }}
      >
        Go Down
      </button>
      <Wrapper>
        {boxes.map(box => {
          return <Box selected={selected === box}>{box}</Box>
        })}
      </Wrapper>
    </>
  )
}

export default Test

Когда мой flex-контейнер оборачивает эти поля и в них есть несколько строк, я также хотел бы разрешить пользователю нажимать кнопку для go вниз по строке, к следующему элементу под выбранным в данный момент блоком.

Проблема в том, что в отличие от приведенного здесь примера, ящики будут иметь разные размеры, а контейнер flexbox max-width также не будет известен. Поэтому я не могу сделать простые вычисления, такие как 3 boxes per row = the currently selected box number + 3 et c.

Есть ли какой-либо способ или идея, которая могла бы решить эту проблему элегантно?

* PS: я пытался преобразовать это в JSFiddle, но не знал, как включить styled-components в качестве внешней библиотеки. Любая помощь будет оценена. Вот моя попытка JSFiddle , я пока не знаю, почему она не работает, но работает над ней!