How to display a selected image from user environment?

displayImage.js

// file: selected/dropped by user

function displayImage(file) {
  const reader = new FileReader()
  reader.readAsDataURL(file) // reader.result will be `data:__`
  
  reader.onload = (e) => imageRef.current.src = reader.result
  
  console.log(reader.result) // returns `data:__` which is URL of files data
}

// reader.readAsBinaryString: The result is a JavaScript ArrayBuffer containing binary data
// reader.readAsDataURL: The result is a string with a data: URL representing the file's data
// reader.readAsBinaryString: The result contains the raw binary data from the file in a string
// reader.readAsText: The result is text in a string