ReactJS - Map for state array

I am creating a finance website but having trouble because .map is not executing on a state array.I have been banging my head on the wall for the pass two days. I am thinking that it is something really small

Here is the GET call I make to populate the array and set the state.

var transactions = []
axios.get("http://localhost:5000/transactions").then(res => {
                res.data.transactions.transactions.forEach(function(txn, idx) {
                    transactions.push({name: txn.name, amount: txn.amount, date: txn.date});
                    // item.push("hey");
                });
            });
this.setState({transactions: transactions});

Then my render method looks like this

render() {
        var list = this.state.transactions.map((item, id) => {
            return (
                <VerticalTimelineElement
                    className="vertical-timeline-element--work"
                    contentStyle=
                    contentArrowStyle=
                    date={item.date}
                    iconStyle=
                    key={id}
                >
                    <h3 className="vertical-timeline-element-title">{item.name}</h3>
                    <h4 className="vertical-timeline-element-subtitle">${item.amount}</h4>
                </VerticalTimelineElement>
            );
        });

        return (
            <VerticalTimeline>
                {list}
            </VerticalTimeline>
        );
    }