Error displaying [object HTMLParagraphElement] in javascript

I’m new to javascript, I have an error displaying [object HTMLParagraphElement] instead of the chat content in the real-time chat function.

<script>
 // Configure Pusher
 Pusher.logToConsole = true;
 var pusher = new Pusher('...', {
     cluster: '...',
     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));
 });
</script>

I tried using innerhtml but it still doesn’t work