How to read the input with ReactJS

I try to create a simple to do list. I try to get the input from a input box, but I don't have any idea how to refer the clickable button to the input tag, which contains the actual value, down below is the code.

import React , {Component, useState} from 'react';
import Person from './Person/Person';
import Input from './Person/Input/Input';
import './App.css';
import { render } from '@testing-library/react';
class App extends Component{
state = {
  
    persons: [   
      { id : 'lsad1', name : 'Name1', age: 19},
      { id : 'l2ea', name : 'dsadas', age:18},
      { id : 'l4rfa', name : 'asda', age:99}
    ],
    showPersons: false
  
  }

     changeNameHandler = (event, id) => {
        const personIndex = this.state.persons.findIndex(p =>{
          return p.id === id;
        }); 
        const person = {
          ...this.state.persons[personIndex]
        };
        person.name = event.target.value;

        const persons = [...this.state.persons];
        persons[personIndex] = person; 

      this.setState({
        persons: persons
      })
    }/

    nameDoubleBind = (event) => {
      this.setState({
        persons:[
          {name:'gsagsa', age:18},
          { name: event.target.value, age:19},
          {name:'ala', age:1} 
        ]
      })
    };
    tooglePerson = () =>{
      const toogle = this.state.showPersons;
      this.setState({showPersons: !toogle});
   }
   
   deletePerson = (personIndex) =>{
     const personArr = [...this.state.persons];//sau cu slice()
     personArr.splice(personIndex,1);
     this.setState({persons : personArr});
   }
   addPerson = (event) =>
   {
     const person = {
       name : this.ref.inputNode.value,
       age :10,
       id: 'dsadas'
     }
     let persons = [...this.state.persons];
     persons.push(person);
     this.setState({persons: persons});
   }
   aaaa = (event) =>
   {
     alert(event.target.name.value)
   }
    
render(){
  const style = {
    backgroundColor: '#ccc',
    font: 'inherit',
    border : '1px solid blue',
    padding: '8px',
    cursor: 'pointer'
    
  }

  let persons = null;
  if (this.state.showPersons) {
    persons = ( <div>
      {this.state.persons.map( (person, index) =>{
        return <Person 
        name={person.name} age={person.age} 
        key = {person.id} click = {() => this.deletePerson(index) }
        changed = { (event) => this.changeNameHandler(event, person.id) } />
      })
      }
    {/* <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
    <Person name={this.state.persons[1].name} age={this.state.persons[1].age}  
      click = {this.changeNameHandler.bind(this, 'elChico')} 
      changed = {this.nameDoubleBind}>Notice nothing</Person>
    <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/> */}
    </div> );
  }

    let my_input = (
           <div>
             <Input 
            
            click = {(event) => this.aaaa(event)}// I use aaaa just to see if the value is read, addPerson() is the real adding method
            
            
        />
      </div>
    );
          



  return (
    <div className="App">
      <h1>My first react App!</h1>
      <button style = {style} onClick={this.tooglePerson}>Toogle Persons</button><br/>
      {my_input}
      {persons}
      </div>

  );    
}
}



export default App;

This js file contains the component import React from 'react'

const input = (props ) => {
return (
    <div>
        
        <input  type="text" name={props.name}></input>
        <button onClick={props.click} />
        
    </div>

)
};
export default input;
        

I can't figure out how to make a refference to tag the input when the button is clicked