Problem is i am using form with hooks and n event handler onChange and onSubmit but while executing my form isnt taking any value

Question

import React ,{useState} from 'react';

const Lifecycle = () =>{
    const [data,setData] = useState({
        uname : "",
        phone : "",
    });
    
    const handler = e=>{
        setData({...data,[e.target.name]:e.target.value});
    };
    const submitHandler = e=>{
        e.preventDefault();
        console.log(data)
    }
    const{uname,phone}=data;
    return(<>
          <div className="container w-50 ">
            
         <form onSubmit={submitHandler}>
         <label className="form-label">Name</label>
           <input type ="text" className="form-control " Value={uname} onChange={ handler} />

           <label className="form-label">Phone</label>
           <input type ="number" className="form-control" Value={phone} onChange={handler}/>

           <button type="submit" className="btn btn-primary my-2">submit</button>
         </form>
            
        
          </div>
</>)

    }
export default Lifecycle;