Why does updating the state array in reactjs is not reflecting in my child component UI

After I receive the response from an API, I am trying to update my child component based on the response data. But the below code is not able to update the UI, and also when I added console in the child component, it looked like the child component is not getting re-rendered. Changes in props are only reflecting but not from the state array object.

Below code I am using from parent to render the child component based on array variable – dataSource

<div id='row-item-container'>
<p>This will render the tabular part</p>
{ this.state.dataSource.length>0 && <div id='trxBox'>
    {this.state.dataSource.map(exp=>(
        <ExpenseEditableBlock data={exp} onDataChange={this.handleDataChange}
        key={exp.TrxID} 
        onExpSelect={this.selectThisExpItem}
        readonly={this.state.validationRenderer}
        validFlag={exp.ValidFlag}
        style={{marginBottom: '5px'}}/>
    ))}
</div>}

Below setState I am using to update the dataSource variable in parent component for the child component

this.setState({dataSource: itemsParam});

Child Component:

import React, { Component } from "react";
import '../../CompCss/ExpenseEditableBlock.css';
import 'react-dropdown/style.css';
import { Utils } from './../Utils';

const utils = Utils();

class ExpenseEditableBlock extends Component {

    constructor(props){
        super(props);
        this.state = {
            expenseData: props.data,
            categoryArray: [],
            _otherVarName_ : null,
            checked: false
        }

       console.log('props ----->',props,'nProps data:',this.state.expenseData);

        utils.expCategories().forEach((item) => {
            this.state.categoryArray.push(item.label);
        });
    }

  render() {
    return (
      <div className={(this.state.expenseData.ValidFlag === "FAIL")?"exp-block-box-one disabled-item":"exp-block-box-one"} style={this.props.style}>
        <div id="exp-item-head-section">
            <div className="display-inline-block">
                <p>Trx ID: {this.state.expenseData.TrxID}</p>
                <p>{this.state.expenseData.ValidFlag}</p>  /*THIS IS NOT REFLECTING THE VALUE */
                <p>{this.props.validFlag}</p>  /*whereas THIS IS REFLECTING THE VALUE */
            </div>
        </div>
        <div>
            <div className="exp-date-block">{this.state.expenseData.TrxDate}</div>
            <div>
                <p>{this.state.expenseData.TrxTitle}</p>
            </div>
        </div>
        
        <div style={{height: '3px'}}>
            {/* <TextField id="standard-basic" label="Standard" variant="standard" /> */}
        </div>
      </div>
    )
  }
}

export default ExpenseEditableBlock;

Below image for what I am trying to achieve