how to reuse modal window in HOC in React

Question

I have a modal window that opens if the user pressed the button twice. But I want to use it in another component, so I want to make it reusable. The modal use states from Redux ('randomActivity' that is data and 'repeatedActivity' that is boolean). So, I'm confused by code refactoring.

It's initial code

class RepeatedModal extends Component {
  closeRepeatedToast = () => {
    this.props.closeRepeatedToast(false);
  };

  render() {
    const { repeatedActivity, randomActivity, classes } = this.props;

    return (
      <div>
        <Modal
          aria-labelledby="transition-modal-title"
          aria-describedby="transition-modal-description"
          className={classes.modal}
          open={repeatedActivity}
          onClose={this.closeRepeatedToast}
          closeAfterTransition
          BackdropComponent={Backdrop}
          BackdropProps={{
            timeout: 500,
          }}
        >
          <Fade in={repeatedActivity}>
            <div className={classes.modalPaper}>
              <h2 id="transition-modal-title">
                "{randomActivity.activity}" was already saved
              </h2>
            </div>
          </Fade>
        </Modal>
      </div>
    );
  }
}

export default ModalComponent(
  withStyles(styles, { withTheme: true })(RepeatedModal)
);

This is code after refactoring.

const RepeatedModal = ({data}) => ((
  <div>
          <Modal
             aria-labelledby="transition-modal-title"
            aria-describedby="transition-modal-description"
             className={classes.modal}
             open={repeatedActivity}
             onClose={this.closeRepeatedToast}
             closeAfterTransition
             BackdropComponent={Backdrop}
             BackdropProps={{
               timeout: 500,
             }}
           >
             <Fade in={repeatedActivity}>
               <div className={classes.modalPaper}>
                 <h2 id="transition-modal-title">
                   "{randomActivity.activity}" was already saved
                 </h2>
               </div>
             </Fade>
           </Modal>
         </div>
))
export default ModalComponent(
  withStyles(styles, { withTheme: true })(RepeatedModal)
);

and hoc

const ModalComponent = (WrappedComponent) => {
  return class extends Component {
    closeRepeatedToast = () => {
      this.props.closeRepeatedToast(this.data);
    };

    render() {
      

      return <WrappedComponent {...this.props} data={this.state.data} />;
    }
  };
};

export default ModalComponent;