Вызов функции от дочернего к родителю в машинописном реагировании

Question

Я новичок в машинописи, и мне нужно вызвать функцию от дочернего компонента к родительскому компоненту.

Вот мой компонент Chatroom.tsx

export class Chatroom extends React.Component<IChatroomProps, {}> {
  private chatRoom: any

  constructor(props: IChatroomProps) {
    super(props)

    this.renderMessageGroup = this.renderMessageGroup.bind(this)
    this.renderMessage = this.renderMessage.bind(this)
    this.chatRoom = React.createRef()
  }

  public render() {
    this.props.scrollDown(this.chatRoom)
    const {
      store: { history }
    } = this.props

    return (
      <MessageList
        ref={this.chatRoom}
        active={true}
        containScrollInSubtree={true}
      >
        <StayScrolled component="div">
          {map(history, this.renderMessageGroup)}
        </StayScrolled>
      </MessageList>
    )
  }

  private renderMessage(message: IMessage, index: number) {
    if (message.isCustomMessage) {
      return map(message.payload.messages, customMessage => {
        const key = `custom-${getUniqueKey()}-${index}`
        const type = customMessage.attachment.type
        console.log('customMessage.attachment.type', type)
        const props: any = {
          attachment: customMessage.attachment,
          key
        }
        switch (type) {
          case 'quick_replies':
            return <QuickRepliesComponent {...props} />
            break
          case 'audio':
          case 'image':
          case 'video':
            return <MediaMessage {...props} newFunctionTypeScript={this.newFunctionTypeScript('s')}/>
            break
          case 'card':
            return <CardMessage {...props} />
            break
          case 'text':
          default:
            const text: string | null =
              customMessage.attachment.payload.text || message.speech || null
            if (text) {
              return (
                <Message
                  isOwn={false}
                  key={key}
                  style={{ ...theme.messages.bot }}
                >
                  <TextMessage message={text} />
                </Message>
              )
            } else {
              return null
            }

            break
        }
      })
    }
    return null
  }
  private newFunctionTypeScript = (val) => {
    console.log('999999999999999999999999')
    return val
  }
}

Здесь я создал newFunctionTypeScript функция, которую мне нужно вызвать из MediaMessage.tsx компонент и

А вот и мой компонент MediaMessage.tsx

interface ITextMessage {
  attachment: ICustomAttachment
  newFunctionTypeScript?: any
}

export class MediaMessage extends React.Component<ITextMessage, {}> {
  public render() {
    return (
      <React.Fragment>
          <MessageMedia>
            <img
              className="mediaImg"
              src={imageUrl}
              onLoad={this.fetchData('dfd')}
              style={{ ...theme.messages.mediaImg }}
            />
          </MessageMedia>
      </React.Fragment>
    )
  }
  private fetchData = val => {
    console.log(this.props.newFunctionTypeScript)
    console.log('dffdfdffdfdf')
    return val
  }
}

Но когда я утешаю this.props.newFunctionTypeScript Я получил неопределенный. Что я здесь не так делаю?

Пожалуйста помоги!!!