React: Dependent Dropdown with Get Request, second dropdown sets first option and cant be choosen

[1269113]

I try to make train system with two dropdowns. First for starting destionation and second for end dest, Which are in MySql. I have two Get Function and they work. The problem is when i select option in first dropdown, second dropdown automatically select first option in field but it cant be selected. I need to choоse another option and then to select the first again (in second dropdown). And if in second dropdwon is only one option it cant be selected at all. I want to something like placeholder and every time first dropdwn is selected, second dropdown to be "Choose Destionation " instead of City which is already auto selected and cant be choosen.

I try to set default option, if else statement and soo much but no one worked.

Here is my code:

import React, {useEffect, useState} from "react";
import axios from "axios";

export const GetLists = () => {
    const [getStart, setGetStart] = useState([])
    const [StartList, setStartList] = useState([{name:'','id':''}]);
    const [getEnd, setGetEnd] = useState([])
    const [EndList, setEndList] = useState([]);
    const [SelectedEnd, setSelectedEnd] = useState([])
    const [View, setView] = useState([])

    useEffect( () => { axios.get("http://localhost:3001/bdj/getStart").then((response) => {
        setStartList(response.data) });}, [])

    useEffect( ()=>{
        const getenddest= async ()=>{
            const resstate= await fetch(`http://localhost:3001/bdj/end/${getEnd}`);
            const getst= resstate.json();
            setEndList(await getst);
        }
        getenddest().then();
    },[getEnd]);

    useEffect( ()=>{
        const info = async ()=>{
            const resstate= await fetch(`http://localhost:3001/bdj/view/${getStart},${SelectedEnd}`);
            const getView= resstate.json();
            setView(await getView);}
        info().then();
    },[getStart,SelectedEnd]);

    const handleChange = (event) => {
        const SelectedStart = event.target.value;
        setGetStart(event.target.value);
        setGetEnd(SelectedStart);
        event.preventDefault()}

    const endHandleChange = (event) => {
        setSelectedEnd(event.target.value);
        event.preventDefault()}

    const [isShown, setIsShown] = useState(false);
    const handleClick = event => {
        setIsShown(current => !current);};

    return <div>
    <form>
        <a>From </a>
        <select  style={{width: '150px'}} className="form-control"  onChange={handleChange}>
            <option key='blankKey' hidden value >City</option>
                {StartList.map(value =>
                        <option value={value.start} key={value.id} >{value.start}</option>)}
        </select>
        <br/><br/>

        <a>End Destination</a>
        <select style={{width: '150px'}} className="form-control"  onChange={endHandleChange}>
            <option key='blankKey' hidden value >City</option>
            {EndList.map(value =>
                <option  value={value.end} key={value.id} >{value.end}</option>)}
        </select>

    </form>
        <br/>
        <br/>
        <button onClick={handleClick}>View information</button>
        {isShown && <div >
            {View.map(value =>
                <table style={{
                    marginLeft: "auto",
                    marginRight: "auto" }}>
                <thead>
                <tr>
                    <th colSpan="2" scope="colgroup">{value.start} - {value.end} : {value.date}</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Start Time</td>
                    <td>{value.starttime}</td>
                </tr>
                <tr >
                    <td>End Time</td>
                    <td>{value.endtime}</td>
                </tr>
                <tr >
                    <td>Duration</td>
                    <td>{value.duration}</td>
                </tr>
                <tr >
                    <td>Price</td>
                    <td>{value.price}</td>
                </tr>
                </tbody>

            </table>
            )}
        </div> }
    </div>

}