Если нужно увеличить количество роллеров (барабанов), например, до десяти, как сделать реализацию гибкой, чтобы не хранить значения вручную для каждого барабана (например, через параметр numberOfRollers и Array.from)?

Состояние барабанов храните массивом, созданным по numberOfRollers, а отображение строите циклом по этому массиву.

Например: const rollers = Array.from({ length: numberOfRollers }, (_, id) => ({ id, value: 0 }));. Так каждый объект независим, в отличие от fill с одним объектом. Количество проверяют на допустимый диапазон, а обновляют элемент по ID или индексу.