Unable to render new element in appendChild()

I’m currently trying to append new element into existing container, but for some reason, it does manage to show when I console.log() but the output wasn’t reflect to the DOM element. The code is available here.

export default function App() {
  var count = document.getElementsByClassName("numbering");
  var numbers = [];
  for (var i = 0; i < count.length; i++) {
    numbers.push(i + 1);
  }

  if (count.length > 0 && count !== "" && count !== undefined) {
    numbers.forEach((element) => {
      var newChild = document.createElement("div");
      newChild.className = "number-" + element;
      newChild.innerHTML = element;
      count[element - 1].appendChild(newChild);

      //does log the output 
      console.log(count[element - 1]);
    });
  }

  const Container = (props) => {
    return <div className="numbering">{props.children}</div>;
  };

  return (
    <div className="App">
      <Container>
        <div>Content 1</div>
      </Container>
      <Container>
        <div>Content 2</div>
      </Container>
    </div>
  );
}

Expectation:

Have a counter that counts how many .numbering class are appeared in element. Then based on the length, display the number accordingly.

Problem:

It doesn’t render as what I expected, but when I console.log() it, it does show.

Question:

May I know where I’ve done wrongly here? Or is there any alternative way to achieve what I’m trying to do here?