How to pass websocket data one component to another page in reactjs?

Question

I have a component called Machine component where it has it's rpm(speed) which can update any time(because the rpm value is comming from websocket).This Machine component has a link to go it's tranding page where it has a line chart.My requirment is to pass the rpm value to the page somehow and feed the line chart component so that the line chart can update whenever the rpm value update

import React from "react";
import { Link, NavLink } from "react-router-dom";
import Indicator from "./Indicator";
import "./Machine.css";
import { Router, Route } from "react-router-dom";
import Tranding from "./Tranding";



export default class Machine extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            machineNo: this.props.machine_status.machineNo,
            rpm: this.props.machine_status.rpm,
            running: this.props.machine_status.running,
            topyarn_break: this.props.machine_status.topyarn_break,
            bottomyarn_break: this.props.machine_status.bottomyarn_break,
            needle_break: this.props.machine_status.needle_break,
        };
    }
    componentDidMount() {

    }

    render() {
        //destructure the object
        const {
            machineNo,
            rpm,
            running,
            topyarn_break,
            bottomyarn_break,
            needle_break,
        } = this.state;
        //define machine color (machine color depends on running status)
        const styleTrue = {
            backgroundColor: "rgba(167, 187, 199, 0.7)",
            color: "black",
        };
        const styleFalse = {
            backgroundColor: "rgba(218, 127, 143, 0.7)",
            color: "black",
        };
        return (
            <div
                className={"container " + running}
                id={machineNo}
            >
                <NavLink
                    to={{
                        pathname: "/machine" + machineNo,
                        state: rpm
                    }}
                    className="text-decoration-none"
                    id="link"
                >
                    <div
                        className="form-control border text-center text-black"
                        style={running ? styleTrue : styleFalse}
                        id={machineNo}
                    >
                        Machine Id : {machineNo}
                    </div>
                </NavLink>

                <div
                    className="machineSpeed form-control border text-center font-weight-bold"
                    id={machineNo}
                >
                    RPM : {rpm}
                </div>
                <div id="faultInfo">
                    <Indicator name="TY" value={topyarn_break} />
                    <Indicator name="BY" value={bottomyarn_break} />
                    <Indicator name="NB" value={needle_break} />
                    <Indicator name="GT" value={false} />
                </div>
            </div>
        );
    }
}