React-Bootstrap get value of dropdown and number input when editing form

I have a form for user to edit the information of their home services for my website, and I am having trouble displaying the old value that user inputs/chooses when it comes to numbers and dropdown value. It works fine with input type of text only.

   const [serviceName, setServiceName] = useState("");
   const [serviceType, setServiceType] = useState("");
   const [servicePrice, setServicePrice] = useState(0);

//to get old value
   useEffect(()=>{

       Axios.get(`http://localhost:8800/${userId}/editthisservice`,{
           id: userId,
       })
       .then((res) => {

           setServiceName(res.data.serviceName);
           setServicePrice(res.data.servicePrice);
           setServiceType(res.data.serviceType);
       })
   });


return(
<div>
<Form className = "m-3" onSubmit = {updateThisService}>
           <Form.Group className="mb-3" controlId="serviceName">
               <Form.Label>Service name</Form.Label>
               <Form.Control type="text" placeholder="Enter service name" 
               onChange = {(event) => {
                   setServiceName(event.target.value);
                 }}
                 defaultValue={serviceName} //shows the old input correctly
               />
           </Form.Group>


           <Form.Group className="mb-3" controlId="serviceType">
               <Form.Label>Service Type</Form.Label>
               <Form.Control as="select"
                   onChange = {(event) => {
                       setServiceType(event.target.value);
                   }}
                defaultValue={serviceType} //did not show the old selected value
               >
                   <option>Select your service type here...</option>
                   <option value="cleaning">Cleaning</option>
                   <option value="gardening">Gardening</option>
                   <option value="babysitting">Babysitting</option>
                   <option value="tutoring">Tutoring</option>
               
               </Form.Control>
           </Form.Group>

           <Form.Group className="mb-3" controlId="servicePrice">
               <Form.Label>Service Price Per Hour</Form.Label>
               <Form.Control type="number" placeholder="Enter service price per hour" 
               onChange = {(event) => {
                   setServicePrice(event.target.value);
                 }}
               defaultValue={servicePrice} //shows 0 instead of the old input
               />
           </Form.Group>


           <Button className="changeBtn" type="submit">Update Service</Button>
           <Button style={{float: 'left'}} className="cancelBtn"  type="submit" onClick = {backToService}>Cancel</Button>
       </Form>
</div>
)

Does anyone know why it only works for input type of text only? I tried console.log both the dropdown and price values and the console did show the output just fine. Thank you in advance