dziedziczenie React js

Question

Witam, mam pytanie odnośnie react.js funkcja matka:  

function Matka() {
  const [loading, setLoading] = useState(false)

  function handleLoading(newloading) {
    setLoading(newloading);
  }
  return (
    <div className={classes.root}>
            <Home onChange={handleLoading}/>
    </div>
  );
}

export default Matka;

przesyłam funkcje do dziecka Home "onChange" i wszystko działa. Następnie chce znowu przekazać tę funkcje

export default function Home(props) {
  props.onChange(true);

  function handleLoading(newloading) {
    props.onChange(newloading);
  }

  const {data, error} = useFetch(link, handleLoading);

  return (
    <Grid container direction="column">
    </Grid>
  );
}

function useFetch(props) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  props.handleLoading(true);

  useEffect(() => {
    
    axios
      .get(props.url)
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        setError(error);
      })
      .finally(() => {
        setTimeout(() => {
          props.handleLoading(true);
          }, 1000);
      });
  }, [props]);

  return { data, error };
}
export default useFetch;

i teraz w Home funkcja handleLoading normalnie działa ale nie wiem jak przekazać to do useFetch, gdzie chce po prostu pobrać dane z bazy i aby stan w Matce zmienił się na początku i na końcu.

W useFetch mam ciagle że handleLoading nie jest funkcją.Czy jest sposób aby przekazać poprawnie tę funkcję z dziecka do dziecka? 

Pozdrawiam
 

Comments

Co pokaże konsola, gdy na górze useFetch wypiszesz console.log('props:',props) i użyjesz tego hooka w komponencie Matka?

---

źle przekazałem propsy... wystarczyło rozwinąć w useFetch (link, handleLoading)