Вызов функции из другого файла в ReactJS

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

Это кнопка. OpenModal не работает

<TableCell>
   <DbButton
   onClick = {(e) => openModal(event.id)}
   >{<FormattedMessage id='delete' />}</DbButton>
</TableCell>

Это модальное окно в другом файле

const openModal = (eventId) => {
    setOpen(true)
    setEventId(eventId)
  }

  return (
    <Panel border = {false}>
      <TableEventsComponent
        data = {dataList}
        goTo = {goTo}
        onChangePage = {onChangePage}
        onChangeRowsPerPage = {onChangeRowsPerPage}
        rowsPerPage = {rowsPerPage}
        page = {page}
        deleting = {deleting}
      ></TableEventsComponent>
      <Dialog
        open = {open}
        onClose = {handleClose}
        aria-labelledby = "alert-dialog-title"
        aria-describedby = "alert-dialog-description"
      >
        <DialogTitle id = "alert-dialog-title">{<FormattedMessage id='alert-title' />}</DialogTitle>
        <DialogContent>
          <DialogContentText id = "alert-dialog-description">
            {<FormattedMessage id='alert-body' />}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button 
            onClick = {handleClose} 
            color = "primary">
            {<FormattedMessage id='cancel' />}
          </Button>
          <Button  
            onClick = {handleConfirm} 
            color = "primary" 
            autoFocus>
            {<FormattedMessage id='confirm' />}
          </Button>
        </DialogActions>
      </Dialog>
    </Panel>
  )

Любой совет?