Having problems accessing json output to update jquery function

Question

This is a bit long. Thank you guys in advance. Am building a live chat app. Am stuck at how to inform the customer that the agent is currently typing a message. I have 3 ColdFusion scripts to do this:

customer.cfm (the customer chat interface)

<script src = "jquery-3.6.0.min.js"></script>

<div align="right" id="agent-typing-indicator" style="display: none;">Agent is typing...</div>

<script>
// other codes here

setInterval(function () {
$.get("notify_typing.cfm", function (data) {
    // Update the isTyping status in customer.cfm based on the response
    var isTyping = data.isTyping;
    agentIsTyping(isTyping);
}); }, 5000); // Check every 5 seconds


function agentIsTyping(isTyping) {
if (isTyping) {
    // Show a message or indicator to the customer to indicate that the agent is typing.
    $("#agent-typing-indicator").show();
} else {
    // Hide the typing indicator when the agent stops typing.
    $("#agent-typing-indicator").hide();
}
}
</script>

agent.cfm (the agent chat interface)

<script src="jquery-3.6.0.min.js"></script>

<script> // other codes here

// Detect typing start and stop in the input field
var typingTimer; // Timer identifier
var doneTypingInterval = 1000; // Time in milliseconds, e.g., 1000 ms = 1 second
$("#agent-response").on("keyup", function () {
clearTimeout(typingTimer);
// Start a timer to detect when the agent stops typing
typingTimer = setTimeout(doneTyping, doneTypingInterval);
// Notify the client that the agent is typing
notifyClientOfTyping(true);
});

$("#agent-response").on("keydown", function () {
// Clear the timer, indicating the agent is still typing
clearTimeout(typingTimer);
});

function doneTyping() {
// Agent stopped typing, notify the client
notifyClientOfTyping(false);
}

function notifyClientOfTyping(isTyping) {
$.post("notify_typing.cfm", { isTyping: isTyping }, function (data) {
    // Handle the response if needed
    console.log(data);
});
}
</script>

notify_typing.cfm

(receives the agent typing status from agent.cfm via ajax post and feeds the same agent typing status via ajax get to customer.cfm)

<cfparam name="form.isTyping" default="">
<cfif structKeyExists(form, "isTyping")>
<cfset isTyping = form.isTyping>
<cfcontent type="application/json">
 <cfoutput>{"isTyping": #serializeJSON(isTyping)#}</cfoutput>  
</cfif>

I have used [ console.log(data); ] to confirm that agent.cfm is sending the correct json values, either {isTyping: 'true'} or {isTyping: 'false'}, to notify_typing.cfm.

The problem is that i receive empty json values ( {isTyping: ''} ) from notify_typing.cfm when customer.cfm makes a json call ( i used console.log(data); to confirm this in customer.cfm ). Hence, am unable to hide or show the 'Agent is typing...' in the customer.cfm. Please help.

I have tried for more than 5 days to solve this without any headway.