Child state doesn't change when props (i.e. parent's state) changes

I have an App class Component which is the parent of two children : Table and BarChart.

I want to pass an array of data that comes from Table to BarChart component (rechart library).

To do so, data goes from Table to App and then from App to BarChart.

Data does update in App when Table state changes like so (state pass as prop and callback function) :

Table.js :

const Table = function CustomEditComponent(p) {

  const { useState } = React;

  const [columns, setColumns]= useState([


    {
      title: 'Entreprise',
      field: 'entreprise',

    },  
   {
      title: 'UO',
      field: 'uo',

    }


  ]);

  const [dataTab, setDataTab] = useState([]);
  const [data, setData] = useState([]);
  useEffect(() => {
    const fecthData = async () => {
      await axios.get("http://localhost:8080/api/cht")
      .then(res => {
        setData(res.data);
        console.log(data);
      });
    };
    fecthData();
  }, []);

return (


  <MaterialTable
  title="Liste Chantiers"
  options=
  {{
    selection: true
  }}
  columns={columns}
  data={data}
  actions={[
    (rowData) => {
      return {
        icon: "bug_report",
        tooltip: "GOOOOO",

 onClick: (event, rowData) =>{
                 let tabEff = [{
            name: 'NB REFUS',
            dataKey:'eff',
            fill:"#F42100",
            eff:rowData.nbColl}]
             

            p.handleClick(tabEff);

          }
        }
      }

    ]}

    />

  )
}

export default Table;

Thanks to the callback function the Table's state passes as props to App :

import React from 'react';
import './App.css';
import TabEntreprise from './TabEntreprise';
import TabChantier from './TabChantier';
import TabSession from './TabSession';
import GrapheEff from './GrapheEff';
import BarresChart from './BarChart';
import TwoPie from './TwoPie';

class App extends React.Component {
 constructor(props) {
        super(props);
        this.state = {
            tabEff: [],
    


        };
    }

    handleClick = (value) => {
       this.state.tabEff = value;
       console.log(this.state.tabEff)

    }
render() {

  return(

<div class="container">
  <div class="title"> Test dashboard</div>
  <div class="corps">
    <div class="graphes-container">
    <BarresChart tabEff = {this.state.tabEff}/><GrapheEff /><TwoPie/><TwoPie/></div>
    <div class="tab-container">
    <div class="tab-chantier">
   <TabChantier handleClick = {this.handleClick} data = {this.props.tabEff} />
    </div>
    </div>
  </div>


</div>

)
}
}

export default App;

And here is my issue, like I have seen on tutorials, I have set App's state as a props for BarresChart. I can see initial state, an empty tab but when App state changes, BarresChart state doesn't it stays empty... can someone telle me why ?

Here is BarresChart :

import React, { Component } from 'react';
import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';



  class BarresChart extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      tabEff  : props.tabEff




      };
    }

  render() {
    console.log(this.state.tabEff);

    return (

  <div>
      <BarChart  width={400} height={400}  data= {this.state.tabEff.data} >


        <YAxis />
        <XAxis dataKey={this.state.tabEff.name} />
        {this.state.tabEff.map((obj) => (
                  <Bar dataKey={obj.dataKey} fill={obj.fill} />

                ))}

        </BarChart>
</div>

      )
    }}

    export default BarresChart;