Как импортировать компонент, который отображается в другом компоненте?

У меня есть компонент формы, отображаемый в компоненте component1, и я хочу использовать его в другом компоненте, component2, но я хочу использовать со всеми функциями внутри component1. Как я могу это сделать? Я попытался экспортировать его из component1, но это не сработало.

Вот где компонент формы отображается в component1:

return (
  <OutsideClickHandler onOutsideClick={this.handleBlur}>
    
     //some not important code was here

      <div
        id={id}
        className={popupClasses}
        ref={node => {
          this.filterContent = node;
        }}
        style={contentStyle}
      >
        {this.state.isOpen ? (
          <FilterForm                           // this FilterFrom I want to export into another component
            id={`${id}.form`}
            paddingClasses={popupSizeClasses}
            showAsPopup
            contentPlacementOffset={contentPlacementOffset}
            initialValues={initialValues}
            keepDirtyOnReinitialize={keepDirtyOnReinitialize}
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
            onCancel={this.handleCancel}
            onClear={this.handleClear}
          >
            {children}
          </FilterForm>
        ) : null}
      </div>
    </div>
  </OutsideClickHandler>
);

} }

Здесь я хочу импортировать и использовать компонент формы:

return (
  <div className={classes}>
   
     //some not important code was here
         
    <ModalInMobile
      id="SearchFiltersMobile.filters"
      isModalOpenOnMobile={this.state.isFiltersOpenOnMobile}
      onClose={this.cancelFilters}
      showAsModalMaxWidth={showAsModalMaxWidth}
      onManageDisableScrolling={onManageDisableScrolling}
      containerClassName={css.modalContainer}
      closeButtonMessage={modalCloseButtonMessage}
    >
      
            //here I want to import and use the *form component*


    </ModalInMobile>
  </div>
);