Creating a class that encapsulates coupled React components, then setting that class as React state?

I have a React Component that renders a FullDayRouteMap component taking in state accumulators coupled with several SingleRouteMap components that each conduct a callback which update the state accumulators.

The FullDayRouteMap components then takes these updated accumulators as props and re-renders.

I wanted to encapsulate the coupled functionality of the two components (i.e. the accumulators and the callback) in a class so I can reuse this feature in several parts of my app and so I made a Manager class that is set as the state of the parent React component in its constructor.

Everything is working but I am wondering if this is good practice. Something I am kind of iffy about is the fact that I have to pass in the parent component to this manager class in order to force it to re-render upon an accumulator update within the

Here is the code for this manager class (shortened for conciseness):

    import React from 'react';
    import SingleRouteMap from './SingleRouteMap';
    import FullDayRouteMap from './FullDayRouteMap';

class Manager {

      constructor(component) {
        this.distanceMetresAcc = 0;
        this.travelTimeSecondsAcc = 0;
      }


      initSingleRouteMap(bookingNodes) {
    bookingNodes.push(
      <SingleRouteMap
        onDirectionsDataLoaded={this.onSingleRouteLoaded}/>);
  }

      getFullDayRouteMap() {
          return <FullDayRouteMap
            totalDistanceTravelledMetres={this.distanceMetresAcc}
            totalSecondsTravelled={this.travelTimeSecondsAcc}
          />
      }    

      onSingleRouteLoaded = (durationSeconds, distanceMetres) => {

        this.travelTimeSecondsAcc += durationSeconds;
        this.distanceMetresAcc += distanceMetres;

        this.component.forceUpdate();
      };

    }

And in my parent component, this is what I do:

Parent extends Component {
    constructor(props) {
       super(props);

       this.state = {
       manager: new Manager(this)
       }
}

}

The render function then just calls this.state.manager.initSingleRouteMap and this.state.manager.getFullDayRouteMap to dynamically place these components in the UI.