Navigating through a multi layered react app - reactjs

Question

I am currently building a react app that has a multi layered component structure where users navigate down into deeper layers. The user would start at the top parent level and then navigate down into deeper and deeper layers of the app (and can also go back up into each previous layer). The layers follow a linear structure (e.g. 1,2,3,4) so there is always a predefined route that users follow, and users could navigate back and forth with a 'next' and 'previous' button. The structure would look like this:
Parent level --> sub level 1 --> sub level 2 --> sub level 3
So each subsequent layer is beneath the previous one. The app itself will render content that gets more detailed and fine grained in each subsequent layer.
My question is how best to represent this structure via components. One option would be to keep track of the current layer via a 'layer' state, and then to show the component that corresponds to the current layer state (as shown in the example code below).
I am unsure whether this is the optimal solution for the structure of my app. I would be very grateful for any suggestions.
Thank you.
import React, { useState } from 'react';
const App = () => {
const [layer, setLayer] = useState(1);
const nextLayer = () => {
setLayer(layer + 1);
}
const prevLayer = () => {
if (layer === 1) {
return;
}
setLayer(layer - 1);
}
let currentLayerView;
switch (layer) {
case 1:
currentLayerView= (
<Layer1
nextLayer={nextLayer}
prevLayer={prevLayer}
/>
);
break;
case 2:
currentLayerView= (
<Layer2
nextLayer={nextLayer}
prevLayer={prevLayer}
/>
);
break;
case 3:
currentLayerView= (
<Layer3
nextLayer={nextLayer}
prevLayer={prevLayer}
/>
);
break;
default:
console.log('default');
}
return (
<>
{currentLayerView}
</>
);
};
export default App;