I am creating a React app which uses Websocket to get a data from third party socket. I need subscribe to 5 endpoints where I pass different parameters so I get a different data:

function App() {

  const [topCurrencies, setTopCurrencies] = useState(['BTCUSD', 'LTCUSD', 'LTCBTC', 'ETHUSD', 'ETHBTC']);


  return (
    <div className="App">
      {topCurrencies.map(x => <CurrencyBar currency={x} />)}
    </div>
  );
}

export default App;

Now I because I need to receive each currency data and update "CurrencyBar" component based on it, I decided to use multiple WebSockets:

function CurrencyBar({currency}) {

    const [data, setData] = useState(null)

    useEffect(() => {
        const ws = new WebSocket('wss://api-pub.bitfinex.com/ws/2')
        ws.addEventListener('open', () => {

            let msg = JSON.stringify({
            event: 'subscribe',
            channel: 'ticker',
            symbol: `t${currency}`,
        })

        ws.send(msg);
        })

        ws.addEventListener('message', (event) => {
            setData(JSON.parse(event.data))
        })
    }, [])




    return (
        <>
          {data}
        </>
    )
}

export default CurrencyBar;

My question is is there a better approach because I imagine that creating 5 Websockets instead of 1 can impact a performance (even though The rate limit for the wss://api-pub.bitfinex.com/ domain is set at 20 connections per minute).

Maybe there is a better way where I only use one instance of "WebSocket"API?