ReactJS: Updating Parent component's states from Child components state change

I am currently creating a ReactJS project where I want to make a recyclable component consist of a checkbox and a textfield input (i.e a Todo list item). The current structure of my React solution is something like this:

<Parent >

--| <Child value={text1} checked= false/>
--| <Child value={text2} checked= false/>


</Parent>

In which the value and checked passed down to the child component will be used for the checkbox and text field input:

Basically the main problem I have now is that when I try to change the state inside the child component, and that state is referenced from property values passed down from the parent component, React will have uncaught error and the web page froze up due to unlimited rendering (in my assumption). And I don't know what is the proper solution where I can update the parent's state based on how it got referenced to the child component and change inside that.

Is there any possible way to reference the change from the child component to the parent component with react like using hooks or creatRef, or should I apply react-redux into my project for this type of problem?

Edited: I have made some changes based on the suggestion from one of the answers that state the issue of handling state and props. In which I create a handleInputChange function in the parent component to update the state based on passing key value which is specified in the child components. However there are still issues:

• The rendering loop still happens.
• The event.target.value is undefined

The parent-child component like following (for input text update):

export class Parent extends Component {
   constructor(props) {
     super(props);
     this.state = {
        text1 = '';
        text2 = '';
        isCheckedAll = false;
     }
     this.handleInputChange = this.handleInputChange.bind(this);
   }
   handleInputChange = (key) => {
     switch (key) {
       console.log("Updating on component: ", key);
       case 'key1':
          this.setState({text1 : Event.target.value});
          break;
       case 'key2':
          this.setState({text2 : Event.target.value});
          break;
       default:
          break;
     }
   }

   render() {
     return (
        <Child value={this.state.text1}, onchange= this.handleInputChange('key1') checked = false>
        <Child value={this.state.text1}, onchange= this.handleInputChange('key1') checked = false>
     )
   }
}

export class Child extends component {
  constructor(props) {
    super(props);
  }


  render() {
    return (
       <>
         <div className="checkbox-wrapper">
            <label>
                <input type="checkbox" checked={this.props.checked} />
            </label>
         </div> 

         <div className="input text-bar">        
           <label>
             <p className="input-label">Input field: </p>
             <input name={this.props.value} className="text-box" type="text" onChange={this.props.onChange} />
           </label>
         </div>
       </>
    )
  }
}

The problem here is clear:

> In which the value and checked passed down to the child component will be used for the checkbox and text field input

This means that checked and value should not be state in the child component. The parent component owns these properties, not the child. The parent should pass a callback to the child so the child can let the parent know that the user did something and the properties should be updated in the parent's state

This is the closest I could find in the official react docs:

https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti-pattern-unconditionally-copying-props-to-state