состояние объекта обратного вызова недопустимо ошибка

Я пытаюсь использовать обратный вызов, который будет проверять ввод.

Когда я пытаюсь ввести текстовое поле, у меня появляется ошибка ниже. Может кто-нибудь помочь, почему у меня ошибка и как я могу ее исправить.

Разрешен ли обратный вызов? Что мне не хватает?

Uncaught Error: объекты недопустимы в качестве дочернего элемента React (найдено: объект с ключами {dispatchConfig, _targetInst, nativeEvent, тип, цель, currentTarget, eventPhase, пузыри, отмена отмены, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped} _Disk_Inst_DistageInstis_Install) _dis). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив. в div (созданный HelloWorldWithPropertiesES5) в HelloWorldWithPropertiesES5 (созданный Parent2) в Parent2 (созданный App) в div (созданный App) в App в инварианте (response-dom.development.js: 55)

    import * as React from 'react';
interface IProps{
    userName?:string
}
const HelloWorldWithPropertiesES5= (props:IProps)=>{   
    return (
        <div>
            Hello {props.userName}
        </div> 
    )
    }

    export default HelloWorldWithPropertiesES5;

   import * as React from 'react'

interface IProps {
    userName : string;
    onChange : (event:any) => void;

  }

  export const NameEditComponent = (props : IProps) => 
  <>
  <h2>this shows event changes</h2>
    <label>Update name:</label>
    <input value={props.userName} 
           onChange={props.onChange}
    />

  </>

export default NameEditComponent;

 import * as React from 'react';
import HelloWorldWithPropertiesES5 from 'src/Lesson2-Properties/HelloES5';
import NameEditComponent from './MyChild';

interface IState {
  userName : string;
}

export class Parent2 extends React.Component<{},IState> {
  constructor(props:any) {
    super(props);

    this.state = {userName: 'defaultUserName'};
  }

  public setUsernameState = (newName:string) => {
          this.setState({userName:newName},()=>this.validateName());
    }



      public validateName () {
        if (this.state.userName.length === 0) {
         alert('error')

        }
      }

  public render() {
    return (
        <>
      <HelloWorldWithPropertiesES5 userName={this.state.userName} />
      <NameEditComponent userName={this.state.userName} onChange={this.setUsernameState} />
    </>
    );
  }
}

export default Parent2;