I want the next button to only show up when the options are selected. One country and 5 cities. Also want to validate and input field that one is not enclosed in form tag. Please guide how can I validate the input field using hooks. Here is the code for react-select.
<Select
name="form-field-name"
onChange={this.handleChange1}
options={options1}
styles={Styles}
placeholder="Select country"
className="mb-3 Signup__right--select"
/>
</div>
<div className="col-lg-7 col-md-12 col-sm-6 col-12">
<Select
isMulti
name="form-field-name"
value={this.state.selectedOption2.value}
onChange={this.handleChange2}
options={filteredOptions}
styles={Styles}
placeholder="Select city"
className="mb-3 Signup__right--select"
/>
</div>```
This is the next button
```<div className="d-flex justify-content-start mt-2 mb-5">
<button className="Signup__right--button my-3 py-2 px-3">
<Link
to={`/candidate_step2`}
className="Signup__right--button--Link text-decoration-none"
>
Next
<img
src={arrow}
alt=""
className="Signup__right--button--img ms-2"
/>
</Link>
</button>```
[This is how the interface looks][1]
[1]: https://i.stack.imgur.com/povwt.png