как передать реквизит многоуровневым компонентам в реакции?

Привет, я недавно работаю над реакцией, и у меня есть вопрос: если мы хотим передать свойства многоуровневым компонентам, как сделать это эффективно??

Скажем, у меня есть три компонента: родительский, дочерний, дочерний. Я хочу передать реквизит от Parent до ChildOfChild.

Я использовал componentWillReceiveProps в Child и ChildOfChild.

вот так: Родитель:

import React, {Component} from "react";
// @ts-ignore
import Child from "./Child";


class Parent extends Component<any, any> {

    constructor(props) {
        super(props);
    }
    render() {

        return (
            <Child filters={this.state.filters} />

        );
    }
}
export default () => {

    return (<Parent/>)
}

Дочерний элемент:

import React, {Component} from "react";
import ChildOfChild from "./ChildOfChild";

class Child extends Component<any, any> {
    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.filters !== this.props.filters) {
            this.setState({filters: nextProps.filters});
        }
    }


    public render() {
        return <ChildOfChild
            filters = {this.state.filters}
            uri = {this.state.uri}
            label = {this.state.label} />
    }
}

export default Child

и ChildOfChild:

import React from "react";
import {Component} from "react";

import * as _ from 'lodash';

import {makeStyles, createStyles} from '@material-ui/core/styles';
import {BackstageTheme} from '@backstage/theme'


const useStyles = makeStyles<BackstageTheme>(() =>
    createStyles({
        someStyle: {
            position: 'relative',
        }
    }),
);

interface Props {
    filters?: any,
    label?: string,
    uri?: string
}

class ChildOfChild extends Component<any, any> {

    constructor(props) {
        super(props);

    }


    componentWillReceiveProps(nextProps) {
        if (nextProps.filters !== this.props.filters) {
            this.fetchCountData(nextProps.filters);
        }

    }

    public componentDidMount() {

        this.fetchCountData(null);
    }

    public fetchCountData(filters) {
        if (filters != null && Object.keys(filters).length > 0) {
            // get data from api

        }
    }


    public render() {
        const popOverText = this.props.label;  // used somewhere
        const classes = this.props.classes;

        return (
            <p className={classes.someStyle}>
            {title}
            </p>
                
        );
    }
}

export default (props:Props) => {
    const classes = useStyles();
    return (
        <ChildOfChild classes={classes} {...props}/>
    )
}

Также я попробовал "componentDidUpdate", очень похожее использование, но, как упоминалось здесь: https://coderhelper.com/a/51313510/11650363, они разные.

Итак, я просто хочу спросить, каково мое решение? есть недостатки?? любые другие хорошие решения для передачи реквизита в несколько слоев??