React: Passing value from child component to parent component

I have a textbox which conatins data from api call.Then the user can edit this textbox . i want to get the edited text to send it back by api call. The value is always sent empty.Can anyone help me in that?

Child Component

export default function RulesText({ruleText, readOnlyStatus, onChange}:{ruleText:string, readOnlyStatus:boolean, onChange:(val:string) => void}) {
    
    const[textValue, setTextValue] = useState(ruleText)
    
    return (
    <div>
        <textarea  
                readOnly={readOnlyStatus}
                value={textValue}
                onChange={(e) => {setTextValue(e.target.value)}}
            />
    </div>
  )
}

Parent Component

const[editedRuleText, setEditedRuleText] = useState('')

<RulesText ruleText={rules[1].substring(rules[1].indexOf(":") + 1)} readOnlyStatus={isEditing ? false : true} onChange={(val:string) => {setEditedRuleText(val); console.log('Val Now' + val)}}/>