I'm trying to implement image preview before file upload in NextJs. When I read the result and try to display it doesn't work as usual. The image breaks. I have added the code below. Any inputs appreciated to sort this problem.

Edit: Partially solved this by converting the buffer to blob url. It works perfectly with img tag but next/image still doesn't support blob urls.

code

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import Image from 'next/image';
import australia from '../public/images/australia.png';

const Create: React.FC<{ onClose: () => void }> = ({ onClose }) => {
    
    const [uploadedImage, setUploadedImage] = React.useState<any>();
    
    const onDrop = useCallback(acceptedFiles => {
        acceptedFiles.forEach((file) => {
            const reader = new FileReader()
    
            reader.onabort = () => console.log('file reading was aborted')
            reader.onerror = () => console.log('file reading has failed')
            reader.onload = () => {
                // Do whatever you want with the file contents
                const binaryStr = reader.result
                //changed this to blob url working perfectly with img tag not with Image tag.
                setUploadedImage(URL.createObjectURL(file));
                }
                reader.readAsArrayBuffer(file)
            })
        }, []);
    return (
            <>
               <div {...getRootProps()} className="p-7 border-2 border-dashed my-5 focus:border-indigo-500">
                <input {...getInputProps()} />
                {
                    isDragActive ?
                        <p>Drop the files here...</p> : <p>Drag 'n' drop some files here, or click to select files</p>
                }
                </div>
                <img src={uploadedImage || '/images/australia.png'} />
            </>
    );

Error Console