Trying to pass data to a parent component from ReactDataGrid

I am trying to pass an id from a table component (I am using the ReactDataGrid library to render a table) to the parent component, so that I can use it in a different child component.
Here's my parent component:

const CallForm = (props) => {
const [isNewOpen, setIsNewOpen] = useState(false);
const toggleNewPopup = () => {
setIsNewOpen(!isNewOpen);
}
const [isEditOpen, setIsEditOpen] = useState(false);
const toggleEditPopup = () => {
setIsEditOpen(!isEditOpen);
}
return (
<Table type={props.screenType === "taskScreen" ? "tasks" : "calls"} />//Trying to receive the id from here.//
<div className="actions">
<div className="buttons-actions">
<button onClick={toggleNewPopup}>{newCallText}</button>
{isNewOpen && <CallPopUp
state="add"
screenType={props.screenType}
handleClose={toggleNewPopup}
/>}
<button onClick={toggleEditPopup}>{editCallText}</button>
{isEditOpen && <CallPopUp
state="edit"
id={}//Pass the id in here.//
screenType={props.screenType}
handleClose={toggleEditPopup}
/>}
<button onClick={props.screenType === "taskScreen" ? closeTask : closeCall}> {closeCallText}</button>
<button onClick={props.screenType === "taskScreen" ? deleteTask : deleteCall}>{deleteCallText}</button>
<button onClick={props.screenType === "taskScreen" ? moveTask : moveCall}>{moveCallText}</button>
</div>
<div className="free-search">
<label htmlFor="freeSearch">Free Search</label>
<input type="text" name='freeSearch' id='freeSearch' />
</div>
</div>
}

This is the Table component:

const Table = (props) => {
const [elementId, setElementId] = useState("");
return (
<div>
<ReactDataGrid
idProperty='id'
columns={headers}
dataSource={allTasks}
theme='default-light'
rtl={true}
scrollThreshold={false}
enableColumnAutosize={true}
//Return the id to parent component.//
/>
<div className='info'>{rowsText}</div>
</div>
)

This is the CallPopUp component:

const CallPopUp = (props) => {
return (
//Inputs including elements, in case of "edit" state the old data is shown in values.//
//In order for me to call to the API get, put or delete request from server I need the id from the table element.//

I tried to use the docs from https://reactdatagrid.io/docs/ and I ran into some solutions I thought could help, but I didn't understand how I can use them.
for example:
The source: https://reactdatagrid.io/docs/api-reference#method-getItemAt

getItemAt
Fn(index)
Number
Returns the item at the specified index in the dataSource.

The source: https://reactdatagrid.io/docs/api-reference#method-getRowId

getRowId
Fn(index)
String|Number
Returns the id of the row at the specified index.

The source: https://reactdatagrid.io/docs/row-selection

Single row selection and keyboard navigation
Let's start with a simple example without support for selection. Try clicking the <ReactDataGrid /> below and then navigate with up/down keyboard arrows. Notice the currently active row changes as you hit arrow up/down. By default keyboard navigation is enabled, but you can turn it off by specifying enableKeyboardNavigation=false. You can also use home/end or page up/down to navigate the <ReactDataGrid /> rows. Additionally, when you move your mouse over a <ReactDataGrid /> row, it shows a hover state (this can be disabled by using showHoverRows=false).
Use activeIndex (controlled) or defaultActiveIndex (uncontrolled), combined with onActiveIndexChange to have full control on user navigation and the currently active row in the <ReactDataGrid />.
When using the controlled activeIndex prop and onActiveIndexChange callback prop to update the activeIndex, if you're doing other compute intensive stuff on the render function, you might notice some performance degradation in the scenario when the user keeps arrow up/down key pressed to quickly navigate to other records. If this is the case, it's better to use the uncontrolled defaultActiveIndex prop instead to obtain better performance.
When navigating the <ReactDataGrid /> with keyboard navigation, as the active index is updated, the <ReactDataGrid /> is automatically scrolled to show the currently active row in the viewport.

In your parent, define a useState to hold the id:

const [elementId, setElementId] = useState("");

Pass down the setElementId to the child like so (so the child can update the elementId):

<Table type={props.screenType === "taskScreen" ? "tasks" : "calls"} setElementId={setElementId />

In your child component, add a onSelectionChange and in the method, call props.SetElementId(data.id);:

const Table = (props) => {
const onSelectionChange = useCallback(({data}) => {
props.setElementId(data.id);
}, [])
return (
<div>
<ReactDataGrid
idProperty="id"
columns={headers}
dataSource={allTasks}
theme="default-light"
rtl={true}
scrollThreshold={false}
enableColumnAutosize={true}
onRowChange={onSelectionChange} // don't forget to attach it
/>
</div>
);
};