I am trying to access data within a deeply nested child component by passing a callback function from the parent component through various child components.

For example, say that this is the parent component that I am rendering:

function ParentComponent = () => {
  const [data, setData] = useState();
  
  const callback = (obj) => {
    setData(obj);
  }
  
  return <p>{data}</p>
}

And I am trying to retrieve data from the nested component in a different file:

// I need to call this component somehow from the parent component
function InitialChildComponent = ({cb}) => {
  return <NestedChildComponent cb={cb}/>
}

// this component cannot directly be called from ParentComponent
function NestedChildComponent = ({cb}) => {
  let data = 'abc';
  cb(data);
  
  return <p> don't want this displayed </p>
}

Is there any way to run the callback function from within the nested child component without displaying the JSX in that same nested component? Or is there another better method of accessing this data from the nested child component?