Using Query for image in Nextjs

I am just trying to take an image input file from the user, then take it in to another route to display it there, so I am using query to achieve this, but for some reason the image is not displaying in that route, and I am not facing any kind of error.

Route code that contain image :

router.push(`/?image=${URL.createObjectURL(selectedFile)}`);

the selectedFile variable value is an object that came from this : event.target.File[0]

Route where I want to display image in :

  const [fileList, setFiles] = useState();
  const { image } = router.query || {};

  useEffect(() => {
    if (image) {
      handleFileUpload(image);
    }
  }, [image]);

  const handleFileUpload = (image) => {
    setFiles(<img src={image} alt="Story" />)
  };

I tried many things and many complex ways from using fetch to save the image in local storage, but nothing is working as expected and leads for the same result, no error, nothing displayed, so I think there may be a problem in the logic or fundamentals of the code.