How can i add more elements in my object in ReactJS?

Hi i need to add a new elements in my object in react but the method is not work

here is my code

let datos= [
{ title: "Event 1", id: "1" },
{ title: "Event 2", id: "2" },
{ title: "Event 3", id: "3" },
{ title: "Event 4", id: "4" },
{ title: "Event 5", id: "5" }

]

Capturar(){
    const ide = document.getElementById("id").value
    const titulo = document.getElementById("titulo").value
    datos.push(title, id = titulo, ide)
}

        <div>
        <input type="text" placeholder='Agregar titulo' id='id' style={{width: "20%",              marginRight:"10px"}}/>
        <input type="text" placeholder='Agregar titulo' id='titulo' style={{width: "20%", marginRight:"10px"}}/>

        <button style={{marginTop: "10px"}} onClick={this.Capturar}>
            Agregar tarea
                </button>
        </div>

Answer

import { useState, useRef } from 'react'

const Test = () => {
  
    const defaultValue= [
      { title: "Event 1", id: "1" },
      { title: "Event 2", id: "2" },
      { title: "Event 3", id: "3" },
      { title: "Event 4", id: "4" },
      { title: "Event 5", id: "5" }
    ]
  const [ datos, setDatos] = useState(defaultValue)
  const id= useRef(null)
  const title = useRef('')

  const Capturar = () => {
    setDatos([...datos, {title: title.current, id: id.current}])
  }

  const handleIdChange = (e) => {
    id.current = e.target.value
  }
  const handleTitleChange = (e) => {
    title.current = e.target.value
  }

  return(
    <div>
      <input type="text" 
             placeholder='Agregar titulo' 
             style={{width: "20%", marginRight:"10px"}}
             onChange={handleIdChange}
      />
      <input type="text" 
             placeholder='Agregar titulo' 
             onChange={handleTitleChange}
             style={{width: "20%", marginRight:"10px"}}/>

      <button style={{marginTop: "10px"}} onClick={Capturar}>
        Agregar tarea
      </button>
    </div>
  )
}

export default Test

with class component :

import React from 'react'

class TestClass extends React.Component {
  constructor() {
    super();
    this.state = {
      id: '',
      title: '',
      datos: [
        { title: "Event 1", id: "1" },
        { title: "Event 2", id: "2" },
        { title: "Event 3", id: "3" },
        { title: "Event 4", id: "4" },
        { title: "Event 5", id: "5" }
      ],
    }
    this.capturar = this.capturar.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }

  capturar () {
    this.setState({...this.state, datos: [...this.state.datos,{title: this.state.title, id: this.state.id} ]  })
  }

  handleChange = (e) => {
    this.setState({...this.state, [e.target.name] : e.target.value })
  }
 
  render() {
    return <div>
      <input type="text" 
             name='title'
             placeholder='Agregar titulo' 
             style={{width: "20%", marginRight:"10px"}}
             onChange={this.handleChange}
      />
      <input type="text" 
             name='id'
             placeholder='Agregar titulo' 
             onChange={this.handleChange}
             style={{width: "20%", marginRight:"10px"}}/>

      <button style={{marginTop: "10px"}} onClick={this.capturar}>
        Agregar tarea
      </button>
    </div>;
  }
}

export default TestClass