Как обновить график recharts?

Question

[Drunk_bear64]

Здравствуйте, у меня есть state с точками, когда я добавляю новую точку, то график не перерисовывается. Как можно это реализовать? С react просто пару дней только работаю

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';

class App extends Component {
  constructor(){
    super();
    this.state = {
      data: [ 
        {
          name: 'Page A', a: 2400,
        },
        {
          name: 'Page B', a: 1398,
        },
        {
          name: 'Page C', a: 2398,
        }
      ],
    }
  }
  func (){
    const {data} = this.state
    const newObject ={name: 'Page C', a: 3398,}
    data.push(newObject)
    this.setState({data: data});
    ReactDOM.render(<App />,document.getElementById("root"))
  }
  test(datatest){
    return (
      <div>
        <LineChart
          width={1000}
          height={600}
          data={datatest}
          margin={{
            top: 5, right: 30, left: 20, bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="a" stroke="#8884d8"/>
        </LineChart>
      </div>
    );
  }
  render(){
    const test = this.test(this.state.data)
    console.log(this.state.data)
    return (
      <div className="App">
        {test}
    <button onClick={() => this.func()}>{this.state.data.length}Нажми на меня</button>
      </div>
    );
  }
}

export default App;