Access Nested Data from Rails backend React frontend

Question

I'm trying to figure out how to access my Rails data that is sent to me in a nested hash, from my react front end. I finally set it up where it is hitting the correct controller to get the information from.

Here is the relevant code:

class LedgersIndex extends React.Component {
  constructor(props) {
    super(props);

    this.state = { paginator: { count: 0, page: 0, limit: 0 }, user: { id: this.props.match.params.user_id }, users: [] };

This is where it is called:

fetchData = (user_id, page_number) => {
    apiService.ledgersIndex(user_id, page_number)
      .then(
        paginated => {
          this.setState({
            users: paginated.users,
            paginator: {

And lastly this is where I'm attempting to render it:

render() {
    const { classes } = this.props;
    const { users, paginator } = this.state;



     return ( ......        
               <TableBody>
                  {users.map(user => (
                    <TableRow key={user.id}>
                      {user.ledgers.map(ledger => (
                        <div>
                          <TableCell align='left' scope='row'>{ledger.entry_type}</TableCell>
                          <TableCell align='left' scope='row'>{ledger.transactable_id}</TableCell>
                          <TableCell align='left' scope='row'>{ledger.transactable_type}</TableCell>
                          <TableCell align='left' scope='row'>{ledger.transacted_at}</TableCell>
                          <TableCell align='left' scope='row'>{ledger.amount_cents}</TableCell>
                          <TableCell align='center' scope='row' className={classes.actionCol}>
                            <LedgersEdit user={user} handleSubmit={this.handleUpdate} user_id={this.state.user.id}/>
                          </TableCell>
                        </div>
                      ))}
                    </TableRow>
                  ))}
                </TableBody>

When I console.log(users) to test if it is working, it is rendering an empty array right now. Data is being generated in a LedgersService through SQL:

class LedgersService
  class << self

    def transactions(user, options = {})
      keyed_list = {}
      transactables_for(user, options).each do |t|
        t_key = "#{t['model']}__#{t['id']}"
        keyed_list[t_key] ||= {
          transactable: {
            type: t['model'],
            id: t['id'],
            user_id: t['user_id'],
            transacted_at: t['transacted_at'],
            amount_cents: t['amount_cents'],
            notes: t['notes'],
            processor: t['processor'],
            details: t['details'],
          },
          ledgers: []
        }
        keyed_list[t_key][:ledgers] << {
          entry_type: t['ledger_entry_type'],
          amount_cents: t['ledger_amount_cents'],
          transacted_at: t['ledger_transacted_at'],
          user_id: t['ledger_user_id'],
          transactable_type: t['transactable_type'],
          transactable_id: t['transactable_id'],
        }
      end
      keyed_list.map(&:second)
    end

Here is how the data is being relayed back to me:

No serializer found for resource: {:transactable=>{:type=>"Deposit", :id=>"28cba04f-5b9d-4c9c-afca-b09a6e0e8739", :user_id=>"72700244-e6b0-4baf-a381-c22bfe56b022", :transacted_at=>"2019-03-12 19:04:48.715678", :amount_cents=>15, :notes=>"none", :processor=>nil, :details=>nil}, :ledgers=>[{:entry_type=>"credit", :amount_cents=>15, :transacted_at=>"2019-03-12 19:04:48.715678", :user_id=>"72700244-e6b0-4baf-a381-c22bfe56b022", :transactable_type=>"Deposit", :transactable_id=>"28cba04f-5b9d-4c9c-afca-b09a6e0e8739"}]}

A serializer does exist for the User model but it's not being generated.

Usually the data has multiple of these points, for instance, one call should have 3+ transactables in it so that is why I'm using the map feature on ledgers to get each relevant data one at a time. Any suggestion on tweaks would be appreciated!