The optimal way for creating wizard-like form in React - reactjs

Question

I am creating a wizard-like form in React. I want it to display another select only when user selects an option in a previous dropdown. Currently my selection works, but I am using a lot of useState hooks here. As eventually I want to have around 10 selects, I think that as much as 10 useStates may not be the best option.
Can you please check out my code and give me some tips that would make it better/explain why such change would make it better?
Below I post my code, it works in codesandbox with bootstrap 4.2.1 and react-select 2.2.0:
import React, { useState } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
const options1 = [
{ label: "1", value: 1 },
{ label: "2", value: 2 }
];
const options2 = [
{ label: "3", value: 3 },
{ label: "4", value: 4 }
];
const options3 = [
{ label: "5", value: 5 },
{ label: "6", value: 6 }
];
const options4 = [
{ label: "7", value: 7 },
{ label: "8", value: 8 }
];
const App = () => {
const [showSecond, setShowSecond] = useState(false);
const [showThird, setShowThird] = useState(false);
const [showFourth, setShowFourth] = useState(false);
const [showButton, setShowButton] = useState(false);
const renderSecond = () => {
if (showSecond) {
return (
<div className="form-group row mt-2">
<label className="col-4">Select 2</label>
<Select
onInputChange={updateSecond}
className="col-8"
options={options2}
/>
</div>
);
}
};
const renderThird = () => {
if (showThird) {
return (
<div className="form-group row mt-2">
<label className="col-4">Select 3</label>
<Select
onInputChange={updateThird}
className="col-8"
options={options3}
/>
</div>
);
}
};
const renderFourth = () => {
if (showFourth) {
return (
<div className="form-group row mt-2">
<label className="col-4">Select 4</label>
<Select
onInputChange={updateFourth}
className="col-8"
options={options4}
/>
</div>
);
}
};
const updateFirst = () => {
// update some data
setShowSecond(true);
};
const updateSecond = () => {
// update some data
setShowThird(true);
};
const updateThird = () => {
// update some data
setShowFourth(true);
};
const updateFourth = () => {
// update some data
setShowButton(true);
};
return (
<div className="container">
<div className="col-12">
<form className="form">
<div className="form-group row mt-2">
<label className="col-4">Select 1 </label>
<Select
className="col-8"
onInputChange={updateFirst}
options={options1}
/>
</div>
{renderSecond()}
{renderThird()}
{renderFourth()}
</form>
</div>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
As I am learning React, every suggestion will be very appreciated!