Unable to get update based on dynamic value

I have a simple react component which takes in a prop which is an Object.
I am trying to pass this in to a dispatch call to get it added to a list.

This works fine if I pass in a static value for the description field.
But fails when I use the dynamic field. I have checked via console log and the dynamic field definitely has a value and it is of type String as expected.

Why does it work when I use a static value (done solely for testing) for now but fails when I use the dynamic value?
Don't see any issues with my store, action, reducer setup cos it updates state fine with a static value.
Please advice. Thank you.

Experiencing this issue inside the ExpenseForm component existing within AddExpensePage where I
am using the expense value being passed in to perform the dispatch.

This is the working example with the static String value.

import React from "react";
import ExpenseForm from "./ExpenseForm";
import {connect} from "react-redux";

const AddExpensePage = (props) =>
  <div>
    <h1>Add Expense</h1>
    <ExpenseForm onSubmit={(expense) => {

      // This is what I want to do but unable to cos of the issue mentioned with description value thus breaking it out as follows.
      // props.dispatch(addExpense(expense))

      console.log(expense.description) // I do get a value like 'sample input' thus no issue with value
      console.log(typeof expense.description) // it is of type String as expected

      // breaking out the expense to be able to hard code value for description.
      const tempFakeExpense =  {
        description: 'HARD_CODED_STRING_WHICH_WORKS', // expense.description will not update
        note: expense.note,
        amount: expense.amount,
        createdAt: expense.createdAt
      }
      props.dispatch(addExpense(tempFakeExpense))
      props.history.push('/');
    }}/>
  </div>

export default connect()(AddExpensePage);

The above doesn't work if I use the dynamic value as follows.

Meaning, if list had 10 items, it remains as 10. It doesn't append list to make it 11.

const actualExpense =  {
    description: expense.description, // not using hard coded value, thus not updating. Why? 
    note: expense.note,
    amount: expense.amount,
    createdAt: expense.createdAt
}

Expecting the issue to exist in above code. Adding the Expense component code below for reference in case there is some form of red herring.

There is no Redux in this component cos the state values are only for input tracking and not used anywhere else. Thus sticking to plain state/ setstate style of state management.

Note: The value got passed correctly to above component thus this state management works fine for ExpenseForm component and it doesn't need Redux to work in this component.

import React from 'react';
import moment from "moment";
import {SingleDatePicker} from "react-dates";
import 'react-dates/lib/css/_datepicker.css';

class ExpenseForm extends React.Component {

  state = {
    description: '',
    note: '',
    amount: '',
    createdAt: moment(),
    focused: false
  }

  render() {
    return (
      <div>
        <form onSubmit={(e) => {
          e.preventDefault();
          if(this.state.description && this.state.amount) {
            this.props.onSubmit({
              description: this.state.description,
              amount: parseFloat(this.state.amount),
              note: this.state.note,
              createdAt: this.state.createdAt.valueOf()
            })
          }
        }}>
          <input
            type='text'
            placeholder='description...'
            autoFocus
            value={this.state.description}
            onChange={e => {
              this.setState(() => ({
                description: e.target.value
              }))
            }}
          />
          {/* Setups for other fields */}
          <button>Add Expense</button>
        </form>
      </div>

    );
  }
}

export default ExpenseForm;