Using the right Accessors for a Key Value Object

Question

This is my first time using a dictionary. I am returning two lists and they are separated by an effective date. The goal is to put each list in its own Datatable with the products that correspond to each effective date.

 Table 1: 

 **name      cost   effectiveDate**

  product1   $20     4/28/2022

 Table 2:

  **name      cost   effectiveDate**
   product1   $20     5/28/2022

Now, I want to format each list by the key with the products, I just dont know how to access the data in a key value pair in typescript. My idea is to format the data first, then render the jsx in a method and pass that to the return but I'm getting this error:

Frontend logic

 private formatOperatorPriceData = () => {
    const operatorPrice = this.state.operatorPrices;
    
    const rows:any = [];

    Object.entries(operatorPrice).forEach(([key, value]) => (index: any) => {
        const tempRow = [
            {
                content: value.name
            },
            {
                content: value.category,
            },
            {
                content: this.renderTaxableCheckbox('operatorPrices', value, index),
                sortItem: value.isTaxable,
                type: 'render',
            },
            {
                content: value.size
            },
            {
                content: value.unit
            },
            {
                content: value.specificGravity,
            },
            {
                content: value.weight,
            },
            {
                content: this.renderCostInput(value, index),
                sortItem: value.cost,
                type: 'render',
            },
            {
                content: this.renderPriceInput(value, index),
                sortItem: value.price,
                type: 'render'
            },
            {
                content: value.effectiveDate
            }
        ];

        rows.push(tempRow);
    });

    this.setState({operatorRegionData: { headers: this.operatorPricesHeader, rows}});
}

 private renderPriceLists = () => (key: string, index: any) => {
const productData = this.getProductListsData();

    return (
        <React.Fragment>
            <Row>
                <Col>
                    <h4 className="accordian-h4">
                        <span onClick={this.toggleList('showProducts')}>
                            <OpenArrow open={this.state.showProducts} />
                            {' '}
                            {key}
                            {' '}
                        </span>
                    </h4>
                </Col>
            </Row>
            {
                <Row>
                    <Col>
                            <DataTable
                                list={productData}
                                headerButtons={this.operatorPriceHeaderButtons}
                                maxHeight='50vh'
                            />
                    </Col>
                </Row>
        }
        </React.Fragment>
    );
 
}

Return

                {
                    this.state.operatorPrices && Object.entries(this.state.operatorPrices).map(([key, value]) =>
                        <React.Fragment key={key}>
                            {
                                 this.renderPriceLists() 
                            }
                        </React.Fragment>
                    )
                }