Why does Flow complain about passing a function to a component?

Question

React

Good evening.
There is this component:

// @flow

import * as React from "react";
import { connect } from "react-redux";
import { searchAction, changeMode } from "../../actions";
import SearchForm from "../../presentational/SearchForm";

type State = {
  inputValue: string
};

type Props = {
  searchAction: (inputValue?: string) => mixed,
  changeMode: (val?: string) => mixed
};

class Search extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      inputValue: ""
    };
  }

  handleSubmit = (e: SyntheticEvent<>) => {
    e.preventDefault();
    let { inputValue } = this.state;
    this.props.searchAction(inputValue);
  };

  handleRadioChange = (e: SyntheticInputEvent<>) => {
    this.props.changeMode(e.target.value);
  };

  inputHandle = (e: SyntheticInputEvent<>) => {
    this.setState({ inputValue: e.target.value });
  };

  render() {
    return (
      <SearchForm
        title="NASA Search"
        inputHandle={this.inputHandle}
        radioChangeHandle={this.handleRadioChange}
        submitHandle={this.handleSubmit}
      />
    );
  }
}

function mapStateToProps(state) {
  return {};
}

const mapDispatchToProps = {
  searchAction,
  changeMode
};

export default connect(mapStateToProps, mapDispatchToProps)(Search);

Errors occur in three places:

inputHandle={this.inputHandle}
        radioChangeHandle={this.handleRadioChange}
        submitHandle={this.handleSubmit}

Code :
Cannot create `SearchForm` element because `SyntheticInputEvent` [1] is incompatible with string [2] in the first argument of property `inputHandle`.
How to fix it?
UPD: SearchForm.js :

//@flow

import React from "react";

type Props = {
  title: string,
  inputHandle: (value: string) => mixed,
  radioChangeHandle: (value: string) => mixed,
  submitHandle: (value: string) => mixed
};

const SearchForm = ({
  title,
  inputHandle,
  radioChangeHandle,
  submitHandle
}: Props) => {
  return (
    <div>
      <h1>{title}</h1>
      <form action="#" id="search-form">
        <input type="text" id="searchInput" onChange={inputHandle} />
        <input
          type="radio"
          name="radio-button"
          value="image"
          defaultChecked={true}
          onChange={radioChangeHandle}
        />{" "}
        Image
        <input
          type="radio"
          name="radio-button"
          value="video"
          onChange={radioChangeHandle}
        />{" "}
        Video
        <input type="submit" value="Go" onClick={submitHandle} />
      </form>
    </div>
  );
};

export default SearchForm;

GITHUB

Answer 1

In addition to the comment, try this:SyntheticInputEvent<HTMLInputElement>