WebSocket connection Failed when using Helia IPFS in react app

Question

I have been trying to use helia in my react.js application but keep getting the following error in the console:

WebSocket connection to ‘wss://ny5.bootstrap.libp2p.io/p2p/QmQCU2EcMqAqQPR2i9bChDtGNJchTbq5TbXJJ16u19uLTa’ failed: Failed to establish a connection to https://141.136.36.230:4001/.well-known/libp2p-webtransport?type=noise: net::ERR_CONNECTION_REFUSED. Failed to establish a connection to https://[2a02:4780:f:f81b::1]:4001/.well-known/libp2p-webtransport?type=noise: net::ERR_ADDRESS_UNREACHABLE.

The above error keeps printing on the console And then the app crashes.

Also getting multiple instances of the following warning: WebTransport session establishment failed. Too many pending WebTransport sessions (64)

Here's the part of code from my App.js which when added throws above error

import { createHelia } from “helia”;
const helia = await createHelia();

Here’s my package.json:

{
“name”: “dapp-eth-dim”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
“@helia/unixfs”: “^1.4.1”,
“@testing-library/jest-dom”: “^5.17.0”,
“@testing-library/react”: “^13.4.0”,
“@testing-library/user-event”: “^13.5.0”,
“bootstrap”: “^4.6.2”,
“helia”: “^2.1.0”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-scripts”: “5.0.1”,
“web-vitals”: “^2.1.4”,
“truffle”: “^5.0.2”,
“web3”: “^4.2.2”
},
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”
},
“eslintConfig”: {
“extends”: [
“react-app”,
“react-app/jest”
]
},
“browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
]
}
}

I also tried running the examples from the official helia repository and same error occurs there as well in nextjs example, https://github.com/ipfs-examples/helia-examples