Why these HTML elements added to DOM using react/nextjs are not visible?

Question

I have a component that renders some html, I want to add some other html element onClick. This is what I tried so far:

const [elementsToAdd, setElementsToAdd] = useState([]);

const handleAddAnother = () => {
  let nextVal = elementsToAdd.length;
  const newChild = getChild(nextVal);
  elementsToAdd.push(newChild);
  setElementsToAdd(elementsToAdd);
}

const getChild = id => {
  return (
    <p>some text</p>
  )
}

const renderChildren = () => elementsToAdd.map(child => {
  return child;
});

return (
  {renderChildren()}
  {questionType === 1 || questionType === 2 ? (
    <p onClick={handleAddAnother}>Add some element</p>
  ) : null}
)

additional DOM elements are added to elementsToAdd array as expected. However, they are not visible in the page. They become visible only when questionType changes (for example from 1 to 2).

what am I doing wrong?