реагировать на календарь, не передавая переменную даты

Question

Я пытаюсь перейти от функции к компоненту класса. код отлично работал с функциями, но когда я перехожу на компонент класса, похоже, что он не передает переменную для моего Datepicker и моего ввода. Я не уверен, как вызвать newEvent, которое находится в this.state. искали способы вызвать newEvent, но не смогли их найти. Я пробовал эти способы на основе документов, которые я нашел при реакции

      export default class OwnCalendar extends Component{
  
  constructor(props){
    
    super(props);
    this.state = {
      newEvent: ({title: "",start: "",end: ""}),
      AllEvent: (events)
    }
   
    this.OnChangeHandlerText = this.OnChangeHandlerText.bind(this);
    this.OnChangeHandlerStart = this.OnChangeHandlerStart.bind(this);
    this.OnChangeHandlerEnd = this.OnChangeHandlerEnd.bind(this); 
    this.OnClickHandler = this.OnClickHandler.bind(this);

  }
  OnChangeHandlerText= (e) =>{
    this.setState({title:[...this.state.newEvent.title, e.target.value]})
  }
  // } setNewEvent({...newEvent,title: e.target.value})}
  OnChangeHandlerStart(startdate){
    this.setState({start: startdate})
  }
  OnChangeHandlerEnd(enddate){
    this.setState({end: enddate})
  }
  OnClickHandler(){ //handleaddevent
      const newtitle = this.state.newEvent.title
     const newstart = this.state.newEvent.start
      const newend = this.state.newEvent.end
      const obj = {title: newtitle, start: newstart, end: newend}
     this.setState({events: obj})

      events.push(obj)
  }
  handleAddEvent(){
    this.setState({events: this.state.newEvent})

  }
  render(){

    return (
        
    <div className="App">
      <h1>My Calendar</h1>

    <Popup  trigger={<button> Add New Plan  </button>} position="right center" >
      
    <div><input type = "text" placeholder ="Add Title" style = {{width:"20%",marginRight: "10px"}}
      value = {this.state.title} onChange = {this.OnChangeHandlerText}
      />
      <DatePicker
      placeholderText="Start Date"
      selected={ this.state.start }
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={30}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
     
    />
    <DatePicker
      placeholderText="End Date"
      selected={this.state.end}
      onChange={(this.OnChangeHandlerEnd)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={30}
      timeCaption="time"
      dateFormat="MMMM d, yyyy h:mm aa"
    />
      <button style={{marginTop: "10px"}} onClick={this.OnClickHandler}> 
      Add events
      </button></div>
  </Popup>