Javascript – Why am I getting an empty array when converting an HTMLCollection into an array?

I am trying to convert tableBody.children (HTMLCollection) into an array so that I can loop through it. To do this I am using Array.from(tableBody.children and assigning it to a variable, tableChildren.

The problem is when I call the variable it return an empty array. The thing that confuses me is that in the variable when I remove the Array.from method and just have const tableChildren = tableBody.children, it returns the full HTMLCollection intact, but when I put back the Array.from into the variable, it turns into an empty array.

Here is the full block of code:

function editFormSubmit(tableBody) {
    const dogForm = document.getElementById("dog-form");

    // variable in question
    const tableChildren = Array.from(tableBody.children);

    dogForm.addEventListener("submit", event => {
        event.preventDefault();

        const updatedDog = {
            name: event.target[0].value,
            breed: event.target[1].value,
            sex: event.target[2].value
        }

        fetch(`http://localhost:3000/dogs/${event.target[3].value}`, {
            method: "PATCH",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json"
            },
            body: JSON.stringify(updatedDog)
        })
        .then(res => res.json())
        .then(dog => {
            tableBody.textContent = "";
            getDogs(tableBody);

            // where I am calling the variable
            console.log(tableChildren);
        })
        .catch(err => console.log(err))
        
        
    })
}

Any ideas of what I am doing wrong?