Accessing child function from functional parent component - react

Question

I have a following situation. A parent functional component MapLayout and a child class component Map.

I would like to call one of the functions inside Map component to center the map from MapLayout when user click on some layout element. I tried using createRef method but without any success. I'm getting the null reference. What am I doing wrong here?

  function MapLayout(props) {
  const classes = useStyles(props);
  const mapReference = React.createRef();

  const onClickLocationHandler = (event, location) => {

      // center the map, call function from map
      console.log(mapReference.current); // this is null

    }
  };

  return (
    <div className={classes.root}>
      <Map
        ref={mapReference}
        onClickLocationHandler={onClickLocationHandler}
      ></Map>)}