How to show raspberrypi sensor data in react using nodejs and socketio

I solve this whole thing using websockets. Made two nodejs websocket servers. One is connected with raspberry pi via port 5000 and other is connected to react via port 4001. Code for raspberrypi python, nodejs server and react client is given below. rpi code:

import asyncio
import socketio
import random
import time

sio = socketio.AsyncClient()

@sio.event
async def connect():
    print('connection established')

@sio.event
async def message(data):
    print('message received with ', data)
    while True:
        await sio.emit('fromAPI', {"id": 1, "Temprature" : random.randint(0,9), "Humidity": random.randint(0,9)})
        await sio.sleep(3)
        

@sio.on('my_message')
async def on_message(data):
    #while True:
    print('I received a message!', data)
    await sio.sleep(1)
        

@sio.event
async def disconnect():
    print('disconnected from server')

async def main():
    await sio.connect('http://localhost:5000')
    await sio.wait()
    loop = asyncio.get_event_loop()
    try:
        asyncio.ensure_future(message(data))
        asyncio.ensure_future(on_message(data))
        loop.run_forever()
    except KeyboardInterrupt:
        pass
    finally:
        print("closing thread")
        loop.close()

if __name__ == '__main__':
    asyncio.run(main())

nodejs code:

const io = require("socket.io")(5000);
const io1 = require("socket.io")(4001);


let interval;
let dataFromReact;

io.on("connection", (socket) => {
  io1.on("connection", (socket1) => { 
    socket1.on("rcvdFromReact", data1 => { 
      dataFromReact = data1;
      socket.emit("my_message", data1);
    });
  });
});

    
    
io.on("connection", socket => {
  socket.send("hello");
  io1.on("connection", socket1 => {
  // either with send()
  console.log('Connected');
  socket.on("fromAPI", (data) => {
    console.log(data);
   socket1.emit("fromNodejs", data);

  });
 });
});

react code (App.js):

import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";
const ENDPOINT = "http://localhost:4001";

function App() {


  const [response, setResponse] = useState("");
  const [title, setTitle] = useState('')

  
  const handleSubmit = (e) => {
    e.preventDefault();
    var temps = e.target.temp.value;
    var humids = e.target.humid.value;
    console.log(temps + humids);
    setTitle(temps);
    const socket = socketIOClient(ENDPOINT);
    socket.emit("rcvdFromReact", temps);
    console.log("Temprature is " + temps);
  }

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
    socket.on("fromNodejs", data => {
      setResponse(data);
      console.log(data);
      //console.log("Temprature is " + temps);
    });
  }, []);

  return (
    <div>
    <p>
      It's {response.Temprature} and {response.Humidity}
    </p>
    <form onSubmit={handleSubmit}>
    <input placeholder = "Temprature" name = "temp"  /> 
    <input placeholder = "Humidity" name = "humid"  /> 
    <button>Click Me</button>
    </form>
    </div>
  );

}

export default App;