Redux-Form setting parameters via multiple buttons

I have a number of headings in a component that is using Redux-Form.

I want to be able to click on a number of header names and set a parameter and then reload the page via a fetch.

I have used this question but while I get no syntax errors it says:

Uncaught ReferenceError: onSubmit is not defined

This is the code I have at the moment:

export const TableHeaders = (props) => {
    const { handleSubmit } = props

    const { sortBy, sortDirection} = props

    return (
        <div>
        <div className="row">
            <div className="col-md-1" style={headingCellStyle}>
            <span onClick={handleSubmit(values => onSubmit({...values, sortBy: 'ClientNumber'}))}>Client # </span>
            {sortBy === 'ClientNumber' && <span>
                {
                sortDirection === 'Descending' ? 
                    <span className='glyphicon glyphicon-sort-by-attributes'></span>
                    : 
                    <span className='glyphicon glyphicon-sort-by-attributes-alt'></span>
                }
                </span>
                }  
            </div>
            <div className="col-md-6" style={headingCellStyle}>
            <span>Name</span>
            {sortBy === 'LastName' && <span>
                {
                sortDirection === 'Descending' ? 
                    <span className='glyphicon glyphicon-sort-by-attributes'></span>
                    : 
                    <span className='glyphicon glyphicon-sort-by-attributes-alt'></span>
                }
                </span>
                }
                <span> / Address </span>
                {sortBy === 'Suburb' && <span>
                {
                sortDirection === 'Descending' ? 
                    <span>
                    <span> - (sorted by Suburb) </span>
                    <span className='glyphicon glyphicon-sort-by-attributes'></span>
                    </span>
                    : 
                    <span>
                    <span> - (sorted by Suburb) </span>
                    <span className='glyphicon glyphicon-sort-by-attributes-alt'></span>
                    </span>
                }
                </span>
                }

            {console.log(`SortBy ${sortBy} Sort Direction ${sortDirection}`)}
            </div>
            <div className="col-md-2" style={headingCellStyle}>Phone</div>
            <div className="col-md-1" style={headingCellStyle}>Jobs</div>
            <div className="col-md-2" style={headingCellStyle}>Actions</div>
        </div>
        </div>
    )
    }
    TableHeaders.propTypes = {
    onSubmit: PropTypes.func.isRequired,
    }

    const TableHeadersForm = reduxForm({
    form: 'SearchClients',
    })(TableHeaders)

    export default TableHeadersForm

My container has the following:

changeHeaders = (values = {}) => {
const { query, sortBy, sortDirection } = this.props
values.query = values.query || ''
const searchParams = {
  query,
  sortBy,
  sortDirection,
  ...values,
  currentPage: 1,
}
console.log('clientsSearch()!', values, searchParams)
this.fetchClients(searchParams)

}

in the render function my TableHeaders component is rendered as follows:

 <TableHeaders onSubmit={this.changeHeaders}
        currentPage={currentPage}
        sortBy={sortBy}
        sortDirection={sortDirection}
      />

I want to set the "sortBy" and the "sortDirection" when the user clicks on the header..

How do I set these two values and