React useState does not update after new array was assigned

Question

I am trying to build a sorting visualizer in React. Unfortunately, my useState doesn't update its value after a random array gets generated. But in an earlier project it worked just fine.

I tried different ways to solve this issue but none of them worked.

import React, { useState } from "react";
// import "./SortingVisualizer.css";

export default function SortingVisualizer() {
  const [numberArray, setNumberArray] = useState(null);

  function resetArray() {
    const array = [];
    for (let i = 0; i < 100; i++) {
      let num = randomIntFromInterval(5, 1000);
      array.push(num);
      console.log(array);
    }
    setNumberArray(array);
  }
  if (numberArray === null) resetArray();

  return (
    <div className="array-container">
      {numberArray.map((value, idx) => {
        return (
          <div className="array-bar" key={idx}>
            {value}
          </div>
        );
      })}
    </div>
  );
}

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}