Trouble responding ajax request Node.js

when i console.log(req.body) in server-side code, its giving me nothing. But my request was successfull and request has data in body. Network tab of dev tools giving me 200 status request and my form data is in the body payload. But its not console.log on server side. Please tell me the solution.

html

<form id="main-form">
    <label>USERNAME:</label>
    <div><input type="text" name="username" placeholder="username"></div>
    <br>
    <label>COMMENT:</label>
    <div><textarea class="output" name="comment" placeholder="comment"></textarea></div><br>
    <button type="submit" id="submit">POST COMMENT</button>
</form>
<div><h3 class="result">THIS TEXT IS GOING TO CHANGE</h3></div>

javascript

const submit = document.querySelector("#submit")

submit.addEventListener("click", handler)

function handler(e){
e.preventDefault();

let xhr = new XMLHttpRequest;

xhr.open('POST', '/')


xhr.onload = function() { 
    console.log(xhr);
    document.querySelector('.result').innerHTML = xhr.response
}

let mainForm = document.getElementById('main-form')
let userData = new FormData(mainForm)

xhr.send(userData)
}

server side

const express = require('express')

const app = express();

app.use(express.urlencoded({extended: true}))

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})

app.get('/script.js', (req, res) => {
res.sendFile(__dirname + '/script.js')
})

app.post('/', (req, res) => {
let username = req.body.username
let comment = req.body.comment

console.log(req.body)

res.send(`Hey`)
})


app.listen(8000, () => {
console.log('server is running on 8000 port');
})