Как сделать "POST" из HTML-формы с помощью XMLHttpRequest ()?

У меня есть эта начальная HTML-форма, в которой пользователь пишет имя наставника, и я хочу сделать POST, нажав кнопку, но конечная точка никогда не обновляется с новым именем

    <form>
            <div class = "form-group">
              <label for = "exampleInputEmail1">Mentor Name</label>
              <input type = "text" class = "form-control" id = "mentor-input" aria-describedby = "emailHelp">
              
              <button type = "submit" class = "btn btn-primary" id = "btn-submit">Submit</button>
    </form>


//Here is my object 
    let mentor = { 
        name: ""
        }

    document.getElementById("mentor-input").addEventListener("keyup", (event)=> {
        let inputValue = event.target.value
        mentor.name= inputValue
        
        }
    )
    
     
    document.getElementById("btn-submit").addEventListener("click",()=> {
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                let response = xhttp.responseText;
             
         };
    
            xhttp.open("POST", `https://ajaxclass-1ca34.firebaseio.com/11g/JavADv/mentors.json`, true);
            xhttp.send(JSON.stringify(mentor));
        }
    })