Как исправить ошибку отрисовки списка в React?

У меня есть список в отдельном файле JS и называется TransactionsList.js

const transactions = [{
    id: 1, 
    value: 100,
    type: 'Доход',
    date: '23.04.2019',
  },
  {
    id: 2, 
    value: 100,
    type: 'Доход',
    date: '22.04.2019',
  },
  {
    id: 3, 
    value: 1500,
    type: 'Доход',
    date: '23.04.2019',
  },
  {
    id: 4, 
    value: 1500,
    type: 'Доход',
    date: '22.04.2019',
  },
  {
    id: 5, 
    value: 500,
    type: 'Доход',
    date: '23.04.2019',
  },
  {
    id: 6, 
    value: 500,
    type: 'Расход',
    date: '22.05.2019',
  },
  {
    id: 7, 
    value: 800,
    type: 'Расход',
    date: '23.05.2019',
  },
  {
    id: 8, 
    value: 800,
    type: 'Расход',
    date: '22.05.2019',
  },
  {
    id: 9, 
    value: 1400,
    type: 'Расход',
    date: '23.05.2019',
  },
  {
    id: 10, 
    value: 1400,
    type: 'Расход',
    date: '22.05.2019',
  }
];

У меня есть шаблон куда нужно отрисовывать элементы списка. Называется Transactions.js

import React from 'react';
import TransactionsList from './TransactionsList';
import './css/transactions.css';

function Transactions(props) {
  const transactionsList = (
    <div>
        <div class="filter-menu">
            <button class="filter-menu__button">Доходы</button>
            <button class="filter-menu__button">Расходы</button>
            <button class="filter-menu__button">За последний месяц</button>
            <button class="filter-menu__button">Более 1000₽</button>
        </div>
        <div class="transactions-menu">
            <ul class="transactions-menu__catalog"> 
            {props.transactions.map((transaction) =>
                <li key={transaction.id}>
                  {transaction}
                </li>
              )}
            </ul>
        </div>
    </div>
  );
  return (
    <main>
      {transactionsList}
    </main>
  );
}

export default Transactions;

А так же есть главный файл Index.JS

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Transactions from './Transactions';
import * as serviceWorker from './serviceWorker';

const transactions = <Transactions />;

ReactDOM.render(
    transactions,
    document.getElementById('root')
);

serviceWorker.unregister();

Но при запуске всей этих файлов выбивает ошибку: TypeError: Cannot read property 'map' of undefined. И ошибку указывается на ul с классом transactions-menu__catalog