Update children's state in higher parent component - reactjs

Question

I need some help. I have a wrapper App component where I hold the state of the application, the App component renders a Router component. I need to set in every page of the application the changes that were made on the page. Every page has a next button to the next page using NavLinks.
I tried to pass down a handle change method but I can not get it to work, the handleChange doesn't get fired. Any help would be very much appreciated.
App:
export default class App extends React.Component {
state = {
categoriesWithSub: [],
currentPage: '',
ticket: {
departments: '',
request: '',
exactRequest: '',
attachments: '',
},
};
componentDidMount = async () => {
const categories = await getCategories();
const categoriesWithSub = await Promise.all(
categories.map(async category => {
const subCategories = await getSubCategories(category.id);
return { ...category, subCategories };
}),
);
this.setState({ categoriesWithSub });
};
makeHandleChange = () => {
alert('Test!');
/* this.setState({
ticket: { ...this.state.ticket, [pageName]: pageChanges },
}); */
};
render() {
const { categoriesWithSub } = this.state;
return <Router categoriesWithSub={categoriesWithSub} handleChange={this.makeHandleChange} />;
}
}
Router:
const routes = [
{
path: '/',
exact: true,
component: Home,
},
{
path: '/departments',
exact: true,
component: Departments,
},
{
path: '/request',
exact: true,
component: Request,
},
{
path: '/thank-you',
exact: true,
component: ThankYou,
},
{
path: '/success',
exact: true,
component: Success,
},
];
export default function Router(categoriesWithSub, handleChange) {
return (
<Switch>
{routes.map(({ path, exact, component: Component, layoutProps = {} }) => {
const WithLayout = ({ ...props }) => (
<Layout {...layoutProps}>
<Component {...props} />
</Layout>
);
return (
<Route
key={path}
path={path}
exact={exact}
render={() => <WithLayout categoriesWithSub={categoriesWithSub} handleChange={handleChange} />}
/>
);
})}
</Switch>
);
}
Child component:
export default class extends Component {
state = {
};
componentDidMount() {
this.props.handleChange(this.state);
}
render() {
const { categoriesWithSub } = this.props.categoriesWithSub;
return (
{categoriesWithSub &&
categoriesWithSub.map(item => (
<Tile
to="./request"
department={item.catName}
key={item.id}
/>
))}
</div>
);
}
}
export function Tile({ to, department }) {
return (
<NavLink to={to} css={tile}>
{department}
</NavLink>
);
}

Answer 1

This will not work
export default function Router(categoriesWithSub, handleChange)
That should be
export default function Router({categoriesWithSub, handleChange})
//or
export default function Router(props){
const {categoriesWithSub, handleChange} = props;
}