Rendering a blob in Nextjs

  const [vname,setVname] = useState('')
  const [vfile,setVfile] = useState<File |null>(null)
  const [selectedValue, setSelectedValue] =useState({category:'dance'})
  const [open,setOpen] =useState(false)
  const [file_url,setFile_url] = useState<any | null>(null)
  const [user,setUser] = useState<any | null>(null)
  const [downloads,setDownload] =useState<any | null>(null)
  const [dfiles,setDfiles] = useState<any | null>(null)

const fetchPosts=useCallback(async()=>{
    const { data:files } = await supabase
    .storage
    .from('files')
    .list()

    if(files){
    
      const dwn = await supabase.storage.from('files').download(file.name)

      const diwn = await supabase.from('category').select().eq('vname',file.name)
    
      setDownload(dwn)
      setDfiles(diwn)
      console.log(dwn)
      console.log(diwn)
     
     
    }
  }
  },[])


 {downloads && downloads.map((download:any)=>(<Downloads key={download.name} download={download}/>))}

interface Props{
data:string;
}



import React from 'react'

const Downloads = ({download}:{download:Props}) => {
  return (
    
    <div><img src={`${download.data}`}/></div>
  )
}

export default Downloads