How can I add cascading dropdown using react hook?

I'm new to react. I want to make a cascading dropdown. I bind the value of the dropdown using react hook. I've used web API and .net core for the backend. Now how can I show dealer point values based on zone values? Please check this code and give me a suggestion on how can I create cascading dropdown. Thanks in advance

Here is my code:

const [resultZone, lstZone] = useState([]);
useEffect(() => {

    fetch('http://localhost:61808/api/Zone', {
        method: 'Get',
        headers: {
            'Content-Type': 'application/json',
        }
    })
        .then(resp => resp.json())
        .then(resp => lstZone(resp))
      
}, [])

const [resultDealer, lstDealer] = useState([]);
useEffect(() => {
    if(resultZone){
       
    fetch('http://localhost:61808/api/Dealer', {
        method: 'Get',
        headers: {
            'Content-Type': 'application/json',
        }
    })

        .then(resp => resp.json())
        .then(resp => lstDealer(resp))
}
}, [])

return (
    <form autoComplete="off" noValidate className={classes.root} onSubmit={handleSubmit}>
     
                <InputLabel style={{ display: 'block' }} className={classes.FormControl}>Dealer Point</InputLabel>

                <FormControl variant="outlined"
                    className={classes.FormControl}>

                    <Select name="dealerId"
                        value={values.dealerId}
                        onChange={handleInputChange}>
                        <MenuItem value="">Select Dealer</MenuItem>
                        {
                            resultDealer.map(x => {
                                return (
                                    <MenuItem value={x.id}>{x.name}</MenuItem>

                                )
                            })

                        }

                    </Select>
                </FormControl>

             <InputLabel style={{ display: 'block' }} className={classes.FormControl}>Zone</InputLabel>

                <FormControl variant="outlined"
                    className={classes.FormControl}>

                    <Select name="zoneId"
                        value={values.zoneId}
                        onChange={handleInputChange}>
                        <MenuItem value="">Select Zone</MenuItem>
                        {
                            resultZone.map(x => {
                                return (
                                    <MenuItem value={x.id}>{x.name}</MenuItem>

                                )
                            })

                        }

                    </Select>
                </FormControl>                
    </form >

);