How do I continuously add more items into my array? Currently only adds one more and keeps mutating it

I want to have a continuously changing deck, like a roguelike deck building game. I can currently add one more card to my array, the main deck, but I can't seem to do more than that. I can only seem to mutate the latest card I've added to the main deck. Can anyone give tips on how to keep going?

Reducer:

import { combineReducers } from "@reduxjs/toolkit"

const initialUserState = {
    mainDeck: [
        { title: 'Strike', indexNumber: 0},
        { title: 'Strike', indexNumber: 0},
        { title: 'Strike', indexNumber: 0},
        { title: 'Strike', indexNumber: 0},
        { title: 'Defend', indexNumber: 1},
        { title: 'Defend', indexNumber: 1},
        { title: 'Defend', indexNumber: 1},
        { title: 'Defend', indexNumber: 1},
        { title: 'Defend', indexNumber: 1},
        { title: 'Bash', indexNumber: 2}
    ] }
         const mainDeckReducer = (deck = [], action, state = initialUserState) => {
    if (action === undefined) {
        console.log("undefined")
    }
    else if (action.type === 'ADD_NEW_CARD') {
        return {
            ...state,
            mainDeck: [...state.mainDeck, action.payload]
        }
    }
    return state }

const selectedCardReducer = (selectedCard = null, action) => {
    if (action.type === 'SELECT_THIS_CARD') {
        return action.payload
    }
    return selectedCard }

export default combineReducers({
    mainDeck: mainDeckReducer,
    selectedCard: selectedCardReducer, })

Action:

export const addNewCard = (title, indexNumber) => {
    return {
        type: 'ADD_NEW_CARD',
        payload: {
            title: title,
            indexNumber: indexNumber
        }
    };
};

Body:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Images from './ImageDatabase.js'
import TopBarStyles from './CSSFiles/TopBarStyles.css'
import { connect } from 'react-redux'
import { addNewCard } from './actions/actions.js'

class TopBar extends Component{
  render() {
    return(
          <div class="topbar-whole-div">
      <div class="topbar-name">
        Guest
      </div>
      <div class="topbar-char">
        The Iron Clad
      </div>
      <div class="topbar-HP">
       <img class="topbar-heart" src={Images[11]} /> <div class="topbar-HP-text"> 75 / 75</div>
      </div>
      <div class="topbar-gold">
        <img class="topbar-gold-pic" src={Images[12]} /> <div class="topbar-gold-text"> 50 </div>
      </div>
      <div class="topbar-potions">
        <img class="topbar-potions-1" src={Images[14]}/>
        <img class="topbar-potions-2" src={Images[14]}/>
        <button
          onClick={() => this.props.addNewCard('Strike', 0)}
        >
          Add a strike to maindeck
        </button>
        <button
          onClick={() => this.props.addNewCard('Bash', 2)}
        >
          Add a Bash to maindeck
        </button>
      </div>
    </div>
    )
  }
}

const mapStateToProps = state => {
  console.log(state)
  return {
    mainDeck: state.mainDeck
  }
}

export default connect(
  mapStateToProps, { addNewCard }
  )(TopBar);

Current console after onClick, with successful addition at Index[10]. But after that, future onClicks only change Index[10] and doesn't add Index[11], which is what I want. I hope future clicks will add [12][13][14]:

mainDeck:
mainDeck: Array(11)
0: {title: 'Strike', indexNumber: 0}
1: {title: 'Strike', indexNumber: 0}
2: {title: 'Strike', indexNumber: 0}
3: {title: 'Strike', indexNumber: 0}
4: {title: 'Defend', indexNumber: 1}
5: {title: 'Defend', indexNumber: 1}
6: {title: 'Defend', indexNumber: 1}
7: {title: 'Defend', indexNumber: 1}
8: {title: 'Defend', indexNumber: 1}
9: {title: 'Bash', indexNumber: 2}
10: {title: 'Strike', indexNumber: 0}
length: 11