ReactでChart.jsを使い、グラフのdataを動的にしたい

前提・実現したいこと

結論はボタンをクリックすると、レーダーチャートのデータ（数値）と、Level.0の部分の数値が連動するようにしたいです。（画像を参考にしていただきたいです。）

今、勉強の一環としてReactでちょっとしたアプリをつくっています。
綺麗なグラフがかけるChart.jsというライブラリーを使用しました。

つまづいているところは、ボタン(コードではLevelコンポーネント内の<button>)をクリックすると、レーダーチャートのデータ（コード内ではChartコンポーネント内のdata）と、Levelの数値(コードではLevelコンポーネント内の<p>タグ内の{this.state.count}）が連動するようにしたいのですがどう書いたらいいか分からず困っています。

実現したいのは、English Speakingのボタンを押すと、その下のLevel.0の0の部分の数値が変わり、同時にレーダーチャート内のEnglish Speakingの数値も変わるというものです。（それぞれのカテゴリーも実装したい。）

ボタンを押すと、Level.0の0の数値が変わるというものは実装できましたが、レーダーチャートの数値も連動させるということはできませんでした。

該当のソースコード

コードの表示(インライン)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Radar } from 'react-chartjs-2';

class Chart extends React.Component {
constructor() {
super()
this.state={

}
}
render() {
const data = {
labels: ['English Speaking', 'English Listening', 'English Reading(CNN)', 'Programming Coding', 'Training for strongth', 'health'],
datasets: [
{
label: "",
data: [0,0,0,0,0,0],
backgroundColor: "rgba(62, 253, 52, 0.4)",
borderColor: "rgba(62, 253, 52, 1.0)"
},
],
};
const options = {
};
return (
<Radar data={data} options={options} />
);
}
}

class Level extends React.Component {

constructor (props) {
super(props)
this.state ={
count:0,
}
}

counts () {
this.setState ({count: this.state.count + 1})
}

render() {

return(
<div>
<div className="itemabove">
<div className="item">
<span>{this.props.value}</span>
<button onClick = {() => this.counts()}>+</button>
<p><span className="levelitem">Level. {this.state.count}</span></p>
</div>
</div>
</div>
);
}
}

class Levels extends React.Component {
constructor () {
super()
this.state ={
counters: [
{id:1, value:"English Speaking"},
{id:2, value:"English Listening"},
{id:3, value:"English Reading(CNN)"},
{id:4, value:"Programming Coding"},
{id:5, value:"Training for strongth"},
{id:6, value:"health"}
],

　}

render () {

return(
  <div>
  <h1>また会う日まで、レベルアップしていようぜ。</h1>
     <Chart />
   {this.state.counters.map(counter => (
     <Level　key={counter.id} value={counter.value} selected={true} rad={this.state.count}/>
   ))}
  </div>
)

}
}

ReactDOM.render
(<Levels />, document.getElementById("root"));

試したこと

親コンポーネントであるLevels内で、子コンポーネントのLevel内にあるstateを再定義して、LevelsからChartコンポーネントにそのstateをpropsとして渡し、Chart内のdatasetsの中のdataでそのpropsを参照することはできたのですが、
ボタンをクリックするとそのstateが更新されるという実装がまだLevel内にある状態になり、それを取り出す方法がわかりません。
このコードはボタンを押すとLevel.0の0の部分だけが変わる時のコードです。ぜひご教授いただければと思います。