Откройте одну и ту же форму из двух разных компонентов

Question

В настоящее время я работаю над проектом, написанным на React и машинописном тексте, у меня есть комп onet, в котором вы можете перечислить итерации, и вы можете редактировать каждый элемент, я использую локальное состояние, чтобы открывать и закрывать модальную и окончательную формы

Я предполагаю создать еще один компонент (на другом маршруте), в котором перечислены те же элементы, но с более подробной информацией. Проблема, с которой я сталкиваюсь сейчас, заключается в том, как открыть ту же форму, которая находится в главном компоненте.

export class mainComponent extends React.Component {
  state = {
    showModal: false
  }

  showEditModal () {
    this.setState({ showModal: true })
  }

  hideModal () {
    this.setState({ showModal: false })
  }

  render () {
    const {item } = this.props

    if (!item) {
      return null
    }

    return (
      <React.Fragment>
        <form onSubmit={handleSubmit()}>
            <Field
                name="name"
                placeholder="name"
            />
            <Field
                name="total"
                placeholder="total"
             />
            <AcButton
                type="submit"
                name="submit"
                loading={isUpdating}
            />
        </form>
      </React.Fragment>
    )
  }
}

const mapStateToProps = (state: IAppState, ownProps: IOwnProps): IStateProps => {
  return {
    item: selectItem(state, ownProps.item)!
  }
}

export default connect(mapStateToProps)(mainComponent)