How do i handle file uploads? i currently have this form to handle it

    const [avatar, setAvatar] = useState(null)
//
<div className="form-control">
                            <label className="label">
                                <span className="label-text">Foto Profil</span>
                            </label>
                            <input type="file" name="avatar" onChange={(e) => setAvatar(e.target.files[0])} className="bg-secondary text-slate-950 input input-bordered" accept="image/*" />
                        </div>

When i console log it, it returns this JSON output

avatar
: 
{}
email
: 
"example@gmail.com"
name
: 
"Agus Dewana"

Can someone guide me?