我在我的父组件中有两个按钮AddRow和DeleteRow按钮，如果我单击addRow按钮，它将在网格中添加一个空行，如果我单击deleteRow按钮，它将从网格中删除选定的行。我在子组件中添加了两个函数，用于向网格添加行和从网格中删除记录。如何从父组件按钮单击事件调用这些函数。下面给出了类似的示例代码。
我已经使用了解除状态到父组件，它正在工作是任何其他方式来做它，因为我需要移动整个子组件代码到父组件，有4个子组件解除所有子代码到父组件成为巨大的代码在父组件中什么是React方式在这种情况下做的事情。

import { render } from 'react-dom';
import React, { useState } from 'react';
    
const App = () => {
  return (
    <Parent />
  );
};
    
const Parent = () => { 
  return (
    <div>
      <h1>Parent Component</h1>
      <div id="newElements"></div>
      <input type="button" value="Add New Element" onClick={} />
      <input type="button" value="Clear Elements" onClick={} />  
      <Child />
    </div>
  )
};
    
const Child = () =>{  
  function addElement() {
    // this function will add row to grid.
    var node = document.createElement("h1");  

    node.innerHTML="New Element";
    document.getElementById('newElements').appendChild(node); 
  }

  function clearElement() {
    // this function will remove row from grid
    document.getElementById('newElements').innerHTML=""; 
  }

  return (
    <div>
      <h1>Child Component</h1>
        // here the grid will be there in my actual code 
        <div id="newElements"></div>
      </div>
  )
};

render(<App />, document.getElementById('root'));

我需要在点击父组件AddNewElement按钮时调用addElement（）函数。