React.js: Unable to access object attribute within state object

I am working on a finance tracker. Eventually, the finance tracker will be able to access an account in the user's bank account, pull every transaction, and the user will be able to add transactions as future projections. The idea is to give the user the ability to run financial projections/scenarios using the most recent checking/saving account information in the user's bank account(s).

I am working on a "running total" column which takes the amount found in transactionData.amount and will add transactionData.amount to startBal if this is the "zero" index. Otherwise, it will use the numbers found in the previous index for transactionData.runningTotal and add to the value found in the current index for transactionData.amount.

In either case, the new calculation should be added to the current index for transactionData.runningTotal. I am essentially mimicking what an online transaction detail would, in the event that the bank does not provide this data already.

Here is the parent component.

import React, { Component } from "react";

import TransactionSearch from "./transactionSearch.js";
import PendingTransactions from "./pendingTransactions.js";
import Transactions from "./transactions.js";

class CheckingAccount extends Component {
  state = {
    startBal: 1000,
    pendingTransData: [
      { id: 0, date: "1/1/2020", transaction: "gas", amount: -25.45 },
      { id: 1, date: "1/2/2020", transaction: "cell phone", amount: -127.35 },
      { id: 2, date: "1/3/2020", transaction: "car payment", amount: -303.97 }
    ],
    transactionData: [
      {
        id: 0,
        date: "1/1/2020",
        transaction: "gas",
        amount: -35.45,
        runningTotal: null
      },
      {
        id: 1,
        date: "1/2/2020",
        transaction: "cell phone",
        amount: -227.35,
        runningTotal: null
      },
      {
        id: 2,
        date: "1/3/2020",
        transaction: "car payment",
        amount: -403.97,
        runningTotal: null
      }
    ]
  };

  addRunningTotal() {
    let { transactionData, startBal } = this.state;
    console.log(transactionData);

    transactionData.map((el, i) => {
      console.log("in map function");
      if (el[i] === 0) {
        return (el[i].runningTotal = el[i].amount + startBal);
      } else if (el[i] > 0) {
        return (el[i].runningTotal = el[i - 1].amount + el[i].amount);
      }
    });
    console.log("out of map function");
    console.log("start Balance: ", startBal);
    console.log("amount: ", transactionData[0].amount);
    console.log("running total: ", transactionData[0].runningTotal);

    this.setState({ transactionData: transactionData, startBal: startBal });
  }

  componentDidMount() {
    this.addRunningTotal();
  }

  render() {
    let pendTransData = (
      <div>
        <h1>PendingTransactions</h1>
        <table>
          <tr>
            <th>Date</th>
            <th>Transaction</th>
            <th>Amount</th>
          </tr>
        </table>
        {this.state.pendingTransData.map((pendingTransData, index) => {
          return (
            <PendingTransactions
              key={pendingTransData.id}
              date={pendingTransData.date}
              transaction={pendingTransData.transaction}
              amount={pendingTransData.amount}
            />
          );
        })}
      </div>
    );

    let transData = (
      <div>
        <h1>Transaction Component</h1>
        <table>
          <tr>
            <th>Date</th>
            <th>Transaction</th>
            <th>Amount</th>
            <th>Running Total</th>
          </tr>
        </table>
        {this.state.transactionData.map((transactionData, index) => {
          return (
            <Transactions
              key={transactionData.id}
              date={transactionData.date}
              transaction={transactionData.transaction}
              amount={transactionData.amount}
              runningTotal={transactionData.runningTotal}
            />
          );
        })}
      </div>
    );

    return (
      <div className="App">
        <h1> Checking Account</h1>
        <TransactionSearch />
        {pendTransData}
        {transData}
      </div>
    );
  }
}

export default CheckingAccount;

Here is the child component where the data should appear.

import React from "react";

function Transactions(props) {
  return (
    <tr>
      <td>{props.date} </td>
      <td>{props.transaction}</td>
      <td>{props.amount}</td>
      <td>{props.runningTotal}</td>
    </tr>
  );
}

export default Transactions;

First, runningTotal attribute does not render in the component. I expected to see a column with the new data in the runningTotal attribute.