javascript [object HTMLParagraphElement] problem with Pusher

New To Javascript programming i want to real-time chat with Pusher but i got problem in html [object HTMLParagraphElement] and it will display normally after reloading the page.

`
// Configure Pusher
Pusher.logToConsole = true;
var pusher = new Pusher(‘fd21ca0961576845a7dd’, {
cluster: ‘ap1’,
encrypted: true
});

// Replace with actual sender and receiver IDs
var senderId = 1;
var receiverId = 2;

// Subscribe to the private channel for the receiver
var channel = pusher.subscribe(`private-chat-${receiverId}`);
channel.bind('new_message', function (data) {
    var messageHistory = document.getElementById('message-history');
    var message = document.createElement('div');
    message.className = `message ${data.senderId === senderId ? 'sent' : 'received'}`;

    // Create and set message content
    var messageContent = document.createElement('p');
    // Ensure data.message is a string before assigning to textContent
    messageContent.textContent = `${String(data.message)} (Sent at ${data.sentAt})`;

    message.appendChild(messageContent);
    messageHistory.appendChild(message);
    messageHistory.scrollTop = messageHistory.scrollHeight; // Scroll to the bottom
});

// Load message history on page load
document.addEventListener('DOMContentLoaded', function () {
    fetch(`/history/${senderId}/${receiverId}`)
        .then(response => response.json())
        .then(messages => {
            var messageHistory = document.getElementById('message-history');
            messages.forEach(message => {
                var msgDiv = document.createElement('div');
                msgDiv.className = `message ${message.senderId === senderId ? 'sent' : 'received'}`;

                // Create and set message content
                var msgContent = document.createElement('p');
                // Ensure message.messageContent is a string before assigning to textContent
                msgContent.textContent = `${String(message.messageContent)} (Sent at ${new Date(message.sentAt).toLocaleString()})`;

                msgDiv.appendChild(msgContent);
                messageHistory.appendChild(msgDiv);
            });
            messageHistory.scrollTop = messageHistory.scrollHeight; // Scroll to the bottom
        })
        .catch(error => console.error('Error loading message history:', error));
});

// Handle sending messages
document.getElementById('send-button').addEventListener('click', function () {
    var messageContent = document.getElementById('message-input').value;

    fetch('/send', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            senderId: senderId,
            receiverId: receiverId,
            messageContent: messageContent
        })
    })
        .then(response => response.json())
        .then(data => {
            console.log(data);

            // Display the sent message in the chat history immediately
            var messageHistory = document.getElementById('message-history');
            var message = document.createElement('div');
            message.className = 'message sent';

            // Create and set message content
            var messageContent = document.createElement('p');
            // Ensure messageContent is a string before assigning to textContent
            messageContent.textContent = `${String(messageContent)} (Sent at ${new Date().toLocaleString()})`;

            message.appendChild(messageContent);
            messageHistory.appendChild(message);
            messageHistory.scrollTop = messageHistory.scrollHeight; // Scroll to the bottom

            // Clear the input field
            document.getElementById('message-input').value = '';
        })
        .catch(error => console.error('Error:', error));
});

`

I tried using innerHTML but it still doesn’t work