I have 3 functional components and I'm trying to raise a value from child up to the grandparent component to set state. However, I'm getting an error from parent component: "TypeError: props.gParentCallback is not a function".

Here's my child

function RRTeam(props) {
  const data = [
    { 
      name: props.team.name,
      id: props.team.id
    }
  ]

  useEffect( ()=>props.parentCallback(data), [])
  console.log('pushing up to AllRRTeams: ', data); // this prints the data i want to see

  return <div></div>;
 
}

export default createFragmentContainer(RRTeam, {
  team: graphql`
    fragment RRTeam_team on RR_Team {
      id
      name
    }
  `,
});

This is the parent component:

function AllRRTeams(props) {    
  
  const handleCallback = (data) => {
    props.gParentCallback(data); // this is giving me an error "TypeError: props.gParentCallback is not a function"
  };

  return (
    <div>
      {props.rr_teams.edges.map(({ node }) => {
        return <RRTeam key={node.id} team={node} parentCallback={handleCallback}/>;
      })}
    </div>
  );
}

export default createFragmentContainer(AllRRTeams, {
  rr_teams: graphql`
    fragment AllRRTeams_teams on RR_TeamConnection {
      edges {
        node {
          ...RRTeam_team
        }
      }
    }
  `,
});

And this is my grandparent component:

const RosterPageRRTeamIDQuery = graphql`
query RosterPageRRTeamIDQuery ($rrName: String) {
  rr_teams (where: {name: $rrName}) {
    ...AllRRTeams_teams
  }
}
`

function RosterPage() {

  const [rrTeam, setRRTeam] = useState([]);

  const handleGParentCallback = (data) => {
    console.log(data);
    setRRTeam((prevData) => [...prevData, data]);
    console.log(rrTeam)
  };


  const gridItem = (rrName, rrID) => (
  <Grid item xs={5}>
  <Table>
    <QueryRenderer
      environment={environment}
      query={RosterPageRRTeamIDQuery}
      variables={{
        rrName: rrName,
      }}

      render={({ error, props }) => {
        if (error) {
          return <div>{error.message}</div>;
        } else if (props) {
          try {
            return <AllRRTeams gParentCallBack={handleGParentCallback} { ...props}  />
          } catch {
            return <div>caught</div>
          }
        }
        return <div>Loading</div>;
      }}
    /> // ... and then I return gridItem below with params.

Any help is greatly appreciated, TIA