How to render a react functional component when instance variable of separate class instance changed?

I am trying the below code,

SubscriptionHandler.js

class SubscriptionHandler {
  constructor() {
    this.orderBooks = [];
  }
  
  recenterOrderBooks = () => {
    this.orderBooks.forEach((item, idx) => {
      // doing something
    });
  };
}

const subscriptionHandler = new SubscriptionHandler();

export default subscriptionHandler;

OrderBookHome.js

import subscriptionHandler from "../../services/SubscriptionHandler";

function OrderBookHome() {
   // some piece of code
   
   return (
     <Box display="flex" justifyContent="center">
    <AddOrderBookForm handleRecenter={subscriptionHandler.recenterOrderBooks}    />
    </Box>
   )

}

export default OrderBookHome;

AddOrderBookForm.js

function AddOrderBookForm({...otherstates, handleRecenter}) {
   // some piece of code
   
   return (
     ....code
     {condition &&
        <Button onClick={handleRecenter}> Recenter Orderbooks </Button>
     }          
     ....code
   )

}

export default AddOrderBookForm;

In this piece of code, whenever the button is clicked I want to rerender OrderBookHome component and display recent data of orderBooks from subscription handler. What is the correct way to do it?
I don’t want to create a separate instance of SubscriptionHandler in OrderBookHome.