WebChat is not working due to some conflict with Google Tag Manager

We have the WebChat (Ver 4.13.0) built into a React application which connects to the Microsoft Bot Framework backend service built in NodeJS. The WebChat stopped working all of a sudden in our enterprise application and started displaying the message 'Taking longer than usual to connect.', as shown below, since last week (11/14/2023). This issue was also seen with the latest version of WebChat (v4.16.0). Please also find below our findings on this issue.

After much debugging we have identified that this issue is happening due to some sort of conflict with ‘Google Tag Manager’ which is also used in the application. If the Google Tag Manager is initialized, as shown below, before the WebChat session is initialized, then it is somehow conflicting with the WebChat middleware events, thereby not triggering 'DIRECT_LINE/CONNECT_FULFILLED' event.

When 'Taking longer than usual to connect.' error occurs we also see the below error in the Console tab of the browser, which is resulting when the WebChat is making a request to 'https://directline.botframework.com/v3/directline/conversations'. Please find below the screenshot of this error.

Error in Console:
Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json') at XMLHttpRequest.onreadystatechange (:3:163) onreadystatechange @ VM328:3 XMLHttpRequest.send (async)

Start by reproducing the issue in the React application with Google Tag Manager initialized before the WebChat session. Inspect the Direct Line conversation request and the missing DIRECT_LINE/CONNECT_FULFILLED event alongside the reported XMLHttpRequest error. Done means WebChat connects successfully with Google Tag Manager enabled and the regression is covered by an appropriate test.