React - passing props for function base react component

Question

Parent component.

Grandchild get data from Parent, but displayed in Child component. 

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = {...};  
  const monthlyMortgageAmount = 1500;  

  return (
    <div>
      <ChildComponent
        data={data}
        monthlyMortgageAmount={monthlyMortgageAmount}
      />
    </div>
  );
};

export default ParentComponent;

 

Child component

Child importing GrandChild, that carries data from Parent. Child fetch the data from Parent with Props. Here's an example of how props are called via functional base component.

import React from 'react';
import GrandChildComponent from './GrandChildComponent';

function ChildComponent(props) {
  const { data, monthlyMortgageAmount } = props;

  return (
    <div>
      <GrandChildComponent
        data={data}
        monthlyMortgageAmount={monthlyMortgageAmount}
      />
    </div>
  );
}

export default ChildComponent;