React adds a list to ul and reports an error

just at the beginning of learning react, I would like to ask, with an add button, below is a ul, and then every click of button, adds li, to the following ul. How does the following code report an error? the error is this.state.listitem.push is not a function

.
const numbers = [1, 2, 3, 4, 5];
var index=0;
class App extends React.Component{
 constructor(props){
   super(props);
   this.state={listitem:[]};
   this.handleClick = this.handleClick.bind(this);
 }
  handleClick() {
    this.setState(
      listitem: this.state.listitem.push(<li>{numbers[0]}</li>);
    );
 }
 render(){
  return (
   <div>
   <button onClick={this.handleClick}>
       Add
   </button>
  <ul>{this.state.listitem}</ul>    
  </div>
 )
 }
}
ReactDOM.render(
  <App />,
  document.getElementById("root")
);
Mar.18,2021

push is not a function. It means that the method is not an array without push. Only the array has the push method, and the push return value is the array's length


https://codesandbox.io/s/ryyz.


.

handleClick= () = > {

let {listitem}=this.state
listitem.push(<li>{numbers[0]}</li>)
this.setState({
  listitem
});

}


const numbers = [1.1, 2.2, 3.3, 4.4, 5.5];
let index = 0
class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        listitem: [7,8,9]
    };
}

handleClick() {
    console.log(numbers[0])
    let tempArray = this.state.listitem
    if (index < numbers.length) {
        tempArray.push(numbers[index])
        this.setState({
            listitem: tempArray
        })
        indexPP
    }
}


render() {
    return (
        <div>
            <button onClick={(() => {
                this.handleClick()
            })}>
                Add
            </button>
            {
                this.state.listitem.map((list, index) => {
                    return (<li key={index}>{list}</li>)
                })
            }

        </div>
    )
}

}

ReactDom.render (

)
<App/>,
document.getElementById('app')

);

Menu