Does input work crookedly on a page with a router?

Question

React

A multi-page application, on a page, i.e., in a child component that is called through a router, the input works strangely, which changes the state of the parent component: after entering the first character, it scrolls to the beginning of the child component and the focus from the input disappears.
The exact same input in the parent component works fine. It also works in the child without a router.

class App extends Component {
  constructor() {
        super();
        this.state = {
          input:'',
        };
        this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
        this.state.input = event.target.value;
        this.setState({input: this.state.input});
  }
  render() {
    return(
      <div>
      <br /><br /><br /><br /><br /><br />
        <input type=''
                        name='input'
                        value={this.state.input}
                        onChange={this.handleChange}
                        placeholder='основной компонент'
                /><br />
                <Switch>
                  <Route exact path="/" component={() => (
                   <PageIndex input={this.state.input} f={this.handleChange} /> )}/>
               </Switch>
      </div>)
  }
}


const PageIndex = (p) => {
  return (
    <div><hr /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <input type=''
                        name='input'
                        value={p.input}
                        onChange={p.f}
                        placeholder='дочерний компонент'
                />
      </div>
  )
}

The problem is with entering text into the input. Changing the state of the parent on a button click works without flicking up.
I can't figure out what the problem is.

Answer 1

class App extends Component {
  state = {
    input: '',
  };

  handleChange = (event) => {
    event.persist();
    this.setState({ input: event.target.value });
  }

  render() {
    const { input } = this.state;

    return(
      <div>
        <br /><br /><br /><br /><br /><br />
        <input type=''
          name='input'
          value={input}
          onChange={this.handleChange}
          placeholder='основной компонент'
        />
        <br />
        <Switch>
          <Route
            exact
            path="/"
            render={props => (
              <PageIndex {...props} input={input} onChange={this.handleChange} />
            )}
          />
        </Switch>
      </div>
    );
  }
}

const PageIndex = ({ input, onChange }) => {
  return (
    <div>
      <hr /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      <input
        name='input'
        value={input}
        onChange={onChange}
        placeholder='дочерний компонент'
      />
    </div>
  )
}

Answer 2

The error is here:

<Route exact path="/" component={() => (<PageIndex input={this.state.input} f={this.handleChange} /> )}/>

Correct like this:

<Route exact path="/" render={props => <PageIndex input={this.state.input} f={this.handleChange} />} />