Troubleshooting Queue Logging in React Component with TypeScript

// global var
const queue = Queue.unbounded<string>();


function ReactComponent() {

  useEffect(() => {
      Effect.gen(function* () {
        const socket = yield* Socket.Socket;

        Effect.runFork(
          Effect.gen(function* () {
            const q = yield* queue;
            yield* Console.log("waiting for the queue"); // logged
            const item = yield* Queue.take(q); // Always suspended here ???
            yield* Console.log("from the queue"); // never logged
            yield* Console.log(item);
          }).pipe(Effect.forever, Effect.provideService(Socket.Socket, socket)),
        );

        yield* socket.run((data) => { // will suspend infinitely 
          return Console.log(data);
        });
          
      }).pipe(
        Effect.provide(layerWebSocket("ws://localhost:3001/ws")),
        Effect.scoped,
        Effect.tapError(Console.error),
        Effect.runPromise,
      );

  }, [...])


  return <button onClick={async () => {
    await Effect.gen(function* () {
      const q = yield* queue;
      yield* Console.log("send to the queue");
      const returnvalue = yield* q.offer("hello world"); // send to the queue
      yield* Console.log(returnvalue);
    }).pipe(Effect.runPromise);
  }}>click</button>
}