My Javascript code is not rendering the createElement("li") bit of my program. I have tried to debug it but it seems like there is something that I am still missing. This is my code.

var state = {
    balance : 32,
    income: 0,
    expense: 220,
    transactions :[
        {name:'Salary', amount: 5000, type: 'income'},
        {name:'Groceries', amount: 30, type: 'expense'},
        {name:'Buy Guitar', amount: 300, type: 'expense'}
    ]
}

var balanceEl = document.querySelector('#balance');
var incomeEl = document.querySelector('#income');
var expenseEl = document.querySelector('#expense');
var transactionsEl = document.querySelector('#transactions');

function init() {

    balanceEl.innerHTML = `$${state.balance}`;
    incomeEl.innerHTML = `$${state.income}`;
    expenseEl.innerHTML = `$${state.expense}`;

    var transactionsEl;

    for (var i = 0; i < state.transactions.length; i++) {
        transactionsEl = document.createElement("li");
        transactionsEl.append(state.transactions[i].name);
        transactionsEl.appendChild(transactionsEl);
    }
}
init();