onChange not sending state to Api.create()

I am new to React js and Api. The dropdown onChange state from Header.js (which is inserted from another component) is not sending to getWOT(). Only the initial state value: defaultMonth can trigger the Api.create(). I am trying to debug using the console.log in getWOT(). Seems like having issue on the componentDidMount or the getWOT(). Please guide me on the mistake if have any. Thanks in advance.

import _ from "lodash";
import { React, Component } from "react";
import { CircularProgressbarWithChildren, buildStyles } from "react-circular-progressbar";
import Api from "./AllServices";
import "react-circular-progressbar/dist/styles.css";
import "./App.css";
import Header from './Header';

const d = new Date();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

const defaultMonth = months[d.getMonth()];
const formatMonth = value => {
var d = new Date(`${value} 01 2022`).toLocaleDateString(`en`, { month: `2-digit` });

return d;
};

class App extends Component {
constructor(props) {
  super(props);

  this.state = {
     isLoading: false,
     allWOT: [],
     value: defaultMonth,
     selectedMonth: formatMonth(defaultMonth),
  };
  this.onChange = this.onChange.bind(this);

}

onChange(event) {
  this.setState({ value: event.value, selectedMonth: formatMonth(event.value) });
}


componentDidMount() {
  this.setState({ isLoading: true})
  this.getWOT();
}

 getWOT() {
  console.log(this.state.selectedMonth);      '''selectedMonth is update here when dropdown value not changing'''
  Api.create().getWOT(this.state.selectedMonth).then(res => {
     if (res.ok) {
        if (res.data) {
           const data = _(res.data.Result)
              .groupBy('PRDLine')
              .map((value, key) => (
                 {
                    PRDLine: key,
                    Qty: _.sumBy(value, "Qty"),
                    FGOutQty: _.sumBy(value, "FGOutQty"),
                    FGRejQty: _.sumBy(value, "FGRejQty"),
                    DownMinutes: _.sumBy(value, "DownMinutes"),
                    Duration: _.sumBy(value.map((item) => {
                       const d1 = new Date(item.FinishDateTime);
                       const d2 = new Date(item.ProcessDateTime);
                       return parseInt((Math.abs(Math.round(d1.getTime() - d2.getTime()) / 60000)))
                    }))
                 }
              ))
              .value();

           this.setState({
              allWOT: data,
              isLoading: false, 
           });
        }
        else {
           window.alert(res.problem)
        }

     }
  })
 }


render() {
  console.log(this.state.selectedMonth);       '''selectedMonth is update here when dropdown value changes'''
  
  

  const Total_target = _.sumBy(this.state.allWOT, x => x.Qty);
  const Total_output = _.sumBy(this.state.allWOT, x => x.FGOutQty);
  const Total_percentage = ((Total_output) / (Total_target) * 100).toFixed(1);

  const renderusers = _.map(this.state.allWOT, (value) => (

     <div className="line-grids" id="grid2">
        <div className="line-title" id="Line2">Line {value.PRDLine[1]}</div>
        <div className="line-target" id="line2-target">TARGET Output: {value.Qty} pcs</div>
        <div className="line-circle" id="grid2-circle">
           <CircularProgressbarWithChildren value={((value.FGOutQty) / (value.Qty) * 100).toFixed(1)} strokeWidth="16" styles={buildStyles({ strokeLinecap: 'butt', pathColor: '#8bc34a' })}>
              <div>{value.FGOutQty} pcs</div>
              <div>{((value.FGOutQty) / (value.Qty) * 100).toFixed(1)} %</div>
           </CircularProgressbarWithChildren>
        </div>

        <div className="line-bars">
           <div className="bar-title">Downtime</div>
           <div className="container">
              <div className="progress" style={{ width: ((value.DownMinutes) / (value.Duration) * 100).toFixed(1) + '%'}}>{((value.DownMinutes) / (value.Duration) * 100).toFixed(1)}%</div>
           </div>
        </div>

        <div className="line-bars">
           <div className="bar-title">No Schedule</div>
           <div className="container">
              <div className="progress" style={{ width: 90 + '%'}}>{90}</div>
           </div>
        </div>

        <div className="line-bars">
           <div className="bar-title">Total Reject</div>
           <div className="container">
              <div className="progress" style={{ width: ((value.FGRejQty) / (value.Qty) * 100).toFixed(1) + '%' }}>{((value.FGRejQty) / (value.Qty) * 100).toFixed(1)}%</div>
           </div>
        </div>

     </div>

  ));



  return (
     


     this.state.isLoading ?
        <h3 style={{ textAlign: 'center' }}>loading...</h3>
        :

        <div>
           <Header value={this.state.value} onChange={this.onChange}/>
           

           <div className="grid-container">
              <div className="main-grid">
                 <div className="prod-title">Production Output</div>
                 <div className="prod-target">TARGET Output: {Total_target} pcs</div>
                 <div className="prod-circle">
                    <CircularProgressbarWithChildren value={Total_percentage} strokeWidth="16" styles={buildStyles({ strokeLinecap: 'butt', pathColor: '#673ab7' })}>
                       <div>{Total_output} pcs</div>
                       <div>{Total_percentage} %</div>
                    </CircularProgressbarWithChildren>
                 </div>
              </div>

              {renderusers}

           </div>


        </div>
  );
 }
}
export default App;