AJAX Error on data.message return “undefined” [closed]

I am using Ajax to fetch data and send the data to google sheet.
However, the alert(data.message); is returning undefined but when I put **data.data.message it works.
**

Question: Why it is returning value if I will use data.data.message but not on data.message?

document.addEventListener('click', function(event) {
    if (event.target.classList.contains('book-now')) {
        let jobId = event.target.dataset.jobId; // Get job ID from button
        let row = event.target.closest('tr');

        fetch(jobBookingAjax.ajaxurl, { // Make sure this prints correctly in console
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams({
                action: 'book_job',
                nonce: jobBookingAjax.nonce,
                job_id: jobId
            })
        })
        .then(response => response.json())
        .then(data => {
            console.log(JSON.stringify(data));
            if(data.success) {
                alert(data.data.message);
                row.remove();
            }else{
                alert("Error: " + data.data.message);
            }
        })
        .catch(error => console.error('Error:', error));
    }
});

For some reason the alert(data.data.message); is working but not the data.message kind of weird.

Expected code should be alert(data.message);