Reaccionar nativo, JavaScript:

Me gustaría hacer una matriz 2D que consista en

 [ [button, button] [button, button, button] ]

Me gustaría generarlo comenzando con un botón grande con flechas al lado para indicar dónde se crea el siguiente botón nuevo. Por ejemplo, si empiezo con solo un botón grande y toco la flecha hacia la izquierda, quiero colocar un nuevo botón a la izquierda del botón original y hacer que ambos tengan el mismo tamaño.

Si toco arriba, quiero crear una nueva fila con un solo botón (del mismo tamaño). es decir, yendo de

 [ [button] ]

a

 [ [new_button] [button] ]

Cualquier consejo sobre cómo hacer esto dinámicamente (y permitir arrastrar ambos botones tanto vertical como horizontalmente sería excelente).

En el peor de los casos, si alguien pudiera proporcionarme un ejemplo/referencia/guía para hacer una lista plana de NxM que tenga componentes arrastrables (donde N y M son dinámicos), sería genial.