Submit button refreshes page even when event.preventDefault is used

Question

FOrm submission in index.html-

 <input type="submit" name="submit" id="travel_details_submit" value="Submit">

This is the code in app.js-

    import  {handleSubmit} from "./apps"; 
    document.getElementById("travel_details_submit").addEventListener("click", handleSubmit);

and this is the code in apps.js-

function handleSubmit(event) {
    event.preventDefault();

    // check what text was put into the form field
    let fromText = document.getElementById('from_place').value
    let toText = document.getElementById('to_place').value
    let dateText = document.getElementById('travel_date').value
    let todoText=document.getElementById('todo_list').value
    let reqBody={
        fromEntry:`${fromText}`,
        toEntry:`${toText}`,
        dateEntry:`${dateText}`,
        todoEntry:`${todoText}`
    };

    console.log("::: Form Submitted :::")
    fetch('http://localhost:8081/testing', {
        method: 'POST',
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(reqBody),
    })
    .then(res => res.json())
    .then(function(res) {
        document.getElementById('destination').innerHTML=`Destination=${res.to}`;
        document.getElementById('from').innerHTML =`From=${res.from}`;
        document.getElementById('date123').innerHTML =`Travel Date=${res.date}`;
        document.getElementById('weather').innerHTML =`Weather=${res.weather}, Temperature=${res.temp}`;
        document.getElementById('img123').setAttribute('src',res.image);
        document.getElementById('todo123').innerHTML=`Todo=${res.todo_list}`;
    })
}

export { handleSubmit }

Now when I run the web app it refreshes the page even though I have used event.preventDefault();

When I was directly calling the function from HTML the code worked perfectly fine and the page didn't refresh.