Every click, React wants to add a div, to the array. Why can't it be rendered?

import React, { Component } from "react";

export default class Scroll extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      row: [],
      num: 0,
    }
  }

  addRow = () => {
    const { row } = this.state;
    row.push(<div key={row.length + 1}>{row.length + 1}</div>);
    this.setState({
      row,
    })
  }

  render() {
    const { row, num } = this.state;
    return (
      <div>

        <div>
          <button onClick={this.addRow}></button>
          {num}
        </div>
      </div>

    )
  }
}
Jul.09,2021
Traverse row when

render

Menu