Как получить элементы 2-го уровня вложенности?

Всем привет. Хочу задать рандомный цвет для метки каждого элемента списка (чтобы кружки перед элементами списка были всегда разного цвета). Есть код:

const randomList = () => {
  const [elements, setElements] = useState(['el1', 'el2', 'el3']);

  const listRef = useRef(null);

  useEffect(() => {
    const listMarks = Array.from(listRef.current.querySelectorAll('span'));
    // Способ получше не могу придумать

    console.log(listMarks); // пустой массив

    // Код для добавления цвета кружочкам - не работает, т.к. лог сверху показывает пустой массив
    listMaks.forEach((mark) => {
      mark.style.backgroundColor = getRandomColor();
    });
  }, []);

  return (
    <ul ref={listRef} className="list" style={{listStyle: 'none'}}> // убираем кружочки по умолчанию
      {elements.map(el => (
        <li className="item" key={el}>
          <span /> // Кружок перед каждым элементом, ему хочу добавить рандомный цвет
          <button>{el}</button>
        </li>
      ))}
    </ul>
  );
}

Проблема в том, что операция по получению элементов через querySelectorAll скорее всего слишком долгая, но пробовал через асинхронные функции - тоже ничего хорошего.

Есть ли какой-то более простой способ получения элементов <span>? Или ошибка вовсе не способе получения?