Can't initialize React checkboxes with an array inside state

So I am working on a Table with one of its columns being checkboxes. These checkboxes original 'checked' values are initialized based on data that I will get from an API. The user later will be able to check/uncheck these checkboxes or check all of them at once by clicking on the checkbox on the header. I'm currently using fake data, just want to get the function to work first. Below is my current code:

import React, { Component } from "react";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
import "./BUTable.styles.css"
import { Typography } from 'antd';

class BUTable extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      timestamp: "",
      selectAll: false,
      data: [],
      SMScheckedOrigin: [],
      SMSchecked: [true, true, true, false],
      NFCchecked: [],
    };
    this.handleChangeSMS = this.handleChangeSMS.bind(this);
    this.handleSingleCheckboxChangeSMS = this.handleSingleCheckboxChangeSMS.bind(
      this
    );
  }

  //for select all
  handleChangeSMS = () => {
    console.log("hi");
    var selectAll = !this.state.selectAll;
    this.setState({ selectAll: selectAll });
    var checkedCopy = [];
    this.state.data.forEach(function(e, index) {
      checkedCopy.push(selectAll);
    });
    this.setState({
      SMSchecked: checkedCopy
    });
  };

  handleSingleCheckboxChangeSMS = (index) => {
    console.log(index);

    var checkedCopy = this.state.SMSchecked;
    checkedCopy[index] = !this.state.SMSchecked[index];
    if (checkedCopy[index] === false) {
      this.setState({ selectAll: false });
    }

    this.setState({
      SMSchecked: checkedCopy
    });
  };

  componentDidMount() {
    let data2 = [];
    for (let i = 1; i <= 3; i++) {
        this.state.SMScheckedOrigin.push({
             eventCode: 'F'+i,
             sms: 'true'
         })
        data2.push ({
            key: i,
            seasonCode: 'F19',
            eventCode: 'F'+i,
            eventName: 'Football vs Washington State',
            sms: 'false',
            nfc: 'true',
        })
    }
    this.state.SMScheckedOrigin.push({eventCode: 'F01', sms: 'false'});
    // this.state.SMScheckedOrigin.push({eventCode: 'F02', sms: 'true'});
    data2.push({
        key: 16,
        seasonCode: 'F14',
        eventCode: 'F01',
        eventName: 'Basketball vs Michigan State',
        sms: 'false', 
        nfc: 'false', 
       });
    // data2.push({
    //     key: 17,
    //     seasonCode: 'F13',
    //     eventCode: 'F05',
    //     eventName: 'Baseball vs Missouri State',
    //     sms: 'true', 
    //     nfc: 'false', 
    //   });


    var checkedCopy = [];
    var selectAll = this.state.selectAll;
    data2.forEach(function(e, index) {
      checkedCopy.push(selectAll);
    });

    this.setState({
      data: data2,
      SMSchecked: checkedCopy,
      selectAll: selectAll
    });
    //console.log ('origin' + this.state.SMScheckedOrigin);
  }

  render() {
    console.log(this.state);
    return (
      <div>
        <div className="container">
          <ReactTable
            data={this.state.data}
            filterable = {false}
            defaultCanSort
            showPagination={false}
            minRows= {0}
            resizable= {true}
            defaultPageSize = {400}
            //defaultPageSize={this.state.data.length}
            columns={[
              {
                Header: (<Typography.Text ellipsis={true}> Season Code </Typography.Text>),
                accessor: "seasonCode",
                width: 120,
                resizable: false,
                className: "table-hd"
              },
              {
                Header: (<Typography.Text ellipsis={true}> Event Code </Typography.Text>),
                accessor: "eventCode",
                width: 110,
                resizable: false,
                className: "table-hd"
              },
              {
                Header: (<Typography.Text ellipsis={true}> Event Name </Typography.Text>),
                accessor: "eventName",
                resizable: false,
                className: "table-hd"
              },
              {
                Header: state => (
                  <div className = "check-box-header">
                  <span>SMS</span> &nbsp; 
                  <input
                    type="checkbox"
                    onChange={() => this.handleChangeSMS(state.sortedData)}
                    checked={this.state.selectAll}
                  /> </div>
                ),
                Cell: row => (
                  <input
                    type="checkbox"
                    //defaultChecked = {this.state.SMScheckedOrigin[row.index].sms}
                    // default here by pre-set array?
                    checked={this.state.SMSchecked[row.index]}
                    onChange={() => this.handleSingleCheckboxChangeSMS(row.index)}
                  />
                ),
                width: 80,
                sortable: false,
                filterable: false,
                resizable: false,
                className: "right"
              },
              {
                Header: state => (
                  <div className = "check-box-header">
                  <span>NFC</span> &nbsp; 
                  <input
                    type="checkbox"
                    onChange={() => this.handleChangeSMS(state.sortedData)}
                    checked={this.state.selectAll}
                  />
                  </div>
                ),
                Cell: row => (
                    <input
                    type="checkbox"
                    defaultChecked={this.state.SMSchecked[row.index]}
                    checked={this.state.SMSchecked[row.index]}
                    onChange={() => this.handleSingleCheckboxChangeSMS(row.index)}
                  />
                ),
                width: 80,
                sortable: false,
                filterable: false,
                resizable: false,
                className: "right"
              },
            ]}
            className="-striped "
          />
        </div>
      </div>
    );
  }
}

export default BUTable;

In the part where I render the cell, I set checked to this.state.SMSchecked[row.index] which I initialized with [true, true, true, false] in the state, but I don't know why my checkboxes aren't initialized. They are all unchecked. How can I fix this? Thank you!

                Cell: row => (
                  <input
                    type="checkbox"
                    //defaultChecked={Origin[row.index].sms === 'true'}
                    //defaultChecked = {this.state.SMScheckedOrigin[row.index].sms}
                    // default here by pre-set array?
                    checked={this.state.SMSchecked[row.index]}
                    onChange={() => this.handleSingleCheckboxChangeSMS(row.index)}
                  />
                ),