File upload bug

<DropdownMenuItem >               <label htmlFor="profile-picture" className="flex items-center gap-2 cursor-pointer">                 <FileUp strokeWidth={1} width={20} height={20}/>                 <span>profile</span>                 <input                   id="profile-picture"                   type="file"                   accept="image/*"                   className="hidden"                   onChange={changePfp}                 />               </label>             </DropdownMenuItem>
functions that will trigger to change the profile picture of the user
  function changePfp(e) {     let file = e.target.files[0];     uploadImage(file)   }   const uploadImage = (file) => {     const reader = new FileReader();     reader.readAsDataURL(file);       reader.onloadend = () => {       const base64data = reader.result;       socket.emit('edit-pfp', {image : base64data});     };   };
Whenever I clicked it is prompting the file to upload and when I set the file and upload it.
It is not triggering the changepfp function.
I am not understading why it is not working as expected.
Could you please help me with it.
Thank you.
Was this page helpful?