Calling a function of a child from another child with same parent React

Question

I have a parent component App that renders ChildA and ChildB

 function App() {
 
 
 const [obj, setObj] = useState<MyObject | null>(null);

 //state to decide if display component should be rendered in the DOM or not
 const [renderChildB, setRenderChildB] = useState<Boolean>(false)

 function callbackWCChanged(obj: MyObject) {
   setObj(obj);
 }

 function unmountDisplay() {
   setWordCountObj(null);
   setRenderDisplay(false);
 }

  return (
    <div className="App">
      <ChildA callback = {callbackWCChanged}></ChildA>
       {obj && renderChildB && <ChildB obj={obj} unmountDisplay={unmountDisplay} ></ChildB>}
    </div>
  );
}

export default App;

ChildA has a text area and a button that when clicked does some calculations to work out number of words and the count and insert them in an obj. I then pass a callback function to the parent App in order to setState obj and pass it down to ChildB that consumes it and renders one component per word+count combo

ChildA

export interface MyObject{
  [word: string]: number
};


type Callback= (obj: MyObject) => void


type ChildAProps= {
  callback: Callback
}



 const TextArea: React.FC<ChildAProps>= ({callback}) => {
  
  const [textAreaValue, setTextAreaValue] = useState<string>("");

  //handle change will consume what the user types in the text are element and save it to state
  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
    setTextAreaValue(event.target.value);
  };

  const splitByWordAndCount = (event: React.MouseEvent<HTMLButtonElement>) => {
    //prevent page refresh//
    event.preventDefault();
    /**HERE I JUST WORK OUT FROM THE INPUT IN TEXTAREA ELEMENT THE AMOUNT OF WORDSA AND THE COUNT AND 
    PASS IT TO THE OBJECT
   
    callback(obj);
  }

  //render it to DOM
  return (
    <>
    <div className="textarea-formwrapper">
      <form className="textarea-form">
        <textarea value={textAreaValue} placeholder="Please insert your text" onChange={handleChange}></textarea>
        <button onClick={splitByWordAndCount}>Display word and count</button>
      </form>
    </div>
    </>
  );
};

In ChildB, has referred before, I use the obj to render "ChildB's" and have a button that if pressed, it removes ChildB components from screen, I also have a callback function that I pass to App in order to remove ChildB from screen on button pressed.

ChildB

type ChildBProps = {
  /**Object passed in with words and count */
  obj: MyObject
  /**function to define if display element gets rendered to screen or not */
  unmountDisplay: () => void
};

const ChildB: React.FC<ChildBProps > = ({obj, unmountDisplay}) => {

  return(
  <div>
    <div className="display-headers-wrapper">
      <h2 className="display-header">Word</h2>
      <h2 className="display-header">Count</h2>
    </div>
    {Object.entries(obj).map(([word, count]) => {
      return(
        <div key = {word}>
          <p>{word}</p>
          <p>{count}</p>
        </div>
      ) 
    })}
    <button onClick={unmountDisplay}>Reset</button>
    
  </div>
)}
   
export default ChildB;

What I want to achieve: When that button (in ChildB) gets pressed I want to clear the textarea value so setTextArea("") but since it is on Child A, I'm not sure how to achieve this. Any help would be appreciated