WebSockets not working in Azure Static Web App -> Azure App Service

I am having issues getting websockets to work in Azure with the following setup:

• Frontend in React, hosted in an Azure Static Web App
• Backend in Node.js (v20 LTS) running in a linux Azure App Service
• The API requests go to the frontend URL under /api, which is automatically proxied to the backend app service (this is all handled through the static web app configuration)

I am using socket.io on both the frontend and backend. The websocket works when the transport is set to polling, so I am confident the URL is correct. However, when the transport is set to websocket, the frontend is unable to establish a connection. The backend has no log of the request, and the frontend shows the following in the console:

index-Y7P4MTLR.js:545 WebSocket connection to 'wss://<redacted>.com/api/socket.io/?EIO=4&transport=websocket' failed:

This is the frontend code:

  const socket = io(socketHost, {
    path: "/api/socket.io",
    withCredentials: true,
    transports: ["websocket"],
  });

The network tab shows the websocket requests with a status of Finished and no response body or any useful information.

I am using socket.io version 4.7.5 on both the frontend and the backend.

Any help is greatly appreciated. Thank you!