How to Reset the dropdown values on form submission, Other Input values are getting Cleared in React Hooks

I have a form and when I click on submit button, the data gets submitted to server. Now, After the data got submitted to server, I Need to clear the Form data to empty. Every fields gets clear other than Dropdown value.What was Issue Here??

const Form = () => {
        const [data, setdata] = useState({
            "UserName" : "",
            "PhoneNumber" : "",
             "email" : "",
              "dropDown" :"",
        })
    
        const [update, setUpdate] = useState([])
    
        const handleChange =(e)=>{
         setdata({...data,[e.target.name]:e.target.value});
            
        }
    
       const handleSubmit=(e)=>{
        e.preventDefault();
        // setUpdate({...data,update});
        // console.log(data);
          axios.post('url',data).then((res)=>{
            //   console.log("user added successfully");
            handleClear();      
          })
    
       }

So, here I wrote the function to clear the form and I called that function after the submitting the form

 const handleClear=()=>{
        let clear={
            "UserName" : "",
            "PhoneNumber" : "",
             "email" : "",
              "dropDown" :"",
        }
        setdata(clear);
    }
    
        return (
            <React.Fragment>
                <h1>LordShiva</h1>
                <div className="container mt-3">
                    <div className="row">
                        <div className="col-md-6">
                            <div className="card">
                                <div className="card-header bg-success text-white">
                                    <h4>Form</h4>
                                    <form>
                                        <div className="form-group">
                                            <input type="text" className="form-control" placeholder='UserName' name="UserName" value={data.UserName} onChange={handleChange} />
                                        </div>
                                        <div className="form-group">
                                            <input name="phone" className="form-control" placeholder='PhoneNumber' name="PhoneNumber" value={data.PhoneNumber} onChange={handleChange} />
                                        </div>
                                        {/* <div className="form-group">
                                                       <DatePicker selected={startDate} placeholder='Select Date' />
                                                       </div> */}
                                        <div className="form-group">
                                            <input name="email" className="form-control" placeholder='Email' value={data.email} onChange={handleChange} />
                                        </div>
                                        <div className="form-group">
                                            <select name="dropDown" onChange={handleChange} className="form-control" >
                                                <option value=""></option>
                                                <option value="Reactjs">ReactJS</option>
                                                <option value="JS">JavaScript</option>
                                                <option value="csCSSs">CSS</option>
                                                <option value="HTML">HTML</option>
                                            </select>
                                        </div>
                       

                                            <div className="form-row">
                                            <button className="btn btn-cyan" type="button" onClick={handleSubmit}>Submit</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </React.Fragment >
        )
    }