How to use STOMP for connecting with ActiveMQ in React js

Can anyone provide successful implementation of Stomp using the latest version of ActiveMQ 5.x using the React N? How to connect and publish to the queue?

I have below questions:

1. I have to retrieve the data from consumer and do some add some boolean value and send it to publish.

2. How can I keep the connection alive because continuously I will get message in queues.

3. How can I implement this in React.js in simple manner (any plugins)

I tried with JavaScript, and it works as expected.

consumer.js

const Stomp = require("stomp-client");
const stompClient = new Stomp("127.0.0.1",61613);

stompClient.connect( function(sessionId){
    console.log("consumer connected");
    stompClient.subscribe("/queue/<name>",function(body){
        console.log(body);
    });
});

producer.js

const Stomp = require("stomp-client");
const stompClient = new Stomp("127.0.0.1",61613);

stompClient.connect( function(sessionId){
   console.log("producer connected"); 

   stompClient.publish("/queue/<name>",function(body){
      console.log(body);
      console.log(typeof(body));
      //JSON.stringify(body);
  });
   stompClient.disconnect();
});

This is what I tried in React.JS (which failed): here i can able to connect and after that if i call subscribe with que name it is not giving any response

import './App.css';

import React,{useEffect} from 'react';
import { Client, Message } from '@stomp/stompjs';

function App() {

  const clientdata =  new Client(); 

  useEffect(() => {
    clientdata.configure({
      brokerURL: 'ws://localhost:61614/stomp',
      onConnect: (frame) => {
        console.log('onConnect');
        console.log(frame);
         clientdata.subscribe('/queue/<quename>',info => {
          console.log(info);
         })      

        console.log(subscription);

      },
      // Helps during debugging, remove in production
      debug: (str) => {
       // console.log(new Date(), str);
      }
    });

    client.activate();

    
  }, []);

  return (
    <div >
      
    </div>
  );
}

export default App;

When i tried the above code I am getting only connected log and I'm not able to subscribe any thing and not seeing anything.