Bad state: Stream has already been listened to. : Error when using WebSocket with Stream builder

Question

I am using a web socket to get the response. I create a stream using it and assign it to the StreamBuilder stream property (refer code below) for getting data snapshots.

Problem:
When I "re-navigate" to the screen which is using this Stream Builder, I get a red screen with an error- Bad state: Stream has already been listened to.

Note- I am not using any StreamController, just using the Stream Builder. Also, I am using a bottom navigation bar to navigate to different screens

import 'package:websocket_sample_app/modals/websocket_response.dart';
import 'package:flutter/material.dart';

import '../modals/data_provider.dart';

class CoinValue extends StatefulWidget {
  final WebsocketProvider provider;

  CoinValue({required this.provider});
  @override
  State<CoinValue> createState() => _CoinValueState();
}

class _CoinValueState extends State<CoinValue> {
  @override
  Widget build(BuildContext context) {
    return DataStream(stream: widget.provider.WebsocketStream);
  }
}

class DataStream extends StatefulWidget {
  final Stream<WebsocketResponse> stream;

  const DataStream({Key? key, required this.stream}) : super(key: key);

  @override
  State<DataStream> createState() => _DataStreamState();
}

class _DataStreamState extends State<DataStream> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: widget.stream,
      builder: (context, snapshot) {
        print("State of Connection:${(snapshot.connectionState).toString()}");
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(
            child: CircularProgressIndicator(),
          );
        }
        print(
            "State of connection:${snapshot.connectionState == ConnectionState.active && snapshot.hasData}");
        if (snapshot.connectionState == ConnectionState.active &&
            snapshot.hasData) {
          // final response = snapshot.data!.toJson();
          WebsocketResponse? obj = snapshot.data as WebsocketResponse?;
          final response = obj!.toJson();
          return Text(
            '${response}',
            style: TextStyle(color: Colors.black),
          );
        }

        /// When we have closed the connection
        if (snapshot.connectionState == ConnectionState.done) {
          return const Center(
            child: Text(
              'No more data',
              style: TextStyle(
                color: Colors.red,
              ),
            ),
          );
        }

        /// For all other situations, we display a simple "No data"
        /// message
        return const Center(
          child: Text('No data'),
        );
      },
    );
  }
}