How do I get my data back from my IpcMain

I am creating a drag and drop react and using electron to send and receive my file data. I received senderId and sender in console.log. How can I get the data to appear? What did I miss?

Dropzone.js file

const [fileNames, setFileNames] = useState([]);

const handleDrop = useCallback(acceptedFiles => {
  setFileNames(_.map(acceptedFiles, ({ name, type, path, size, lastModified, 
   lastModifiedDate }) => {
    return { name, type, path, size, lastModified, lastModifiedDate };
  }))
  let formData = new FormData();
  formData.append('uploadedFiles', fileNames);
}, [fileNames]);


useEffect(() => {
  ipcRenderer.send(FETCH_AUDIO_FILES, fileNames);
}, [fileNames]); 

useEffect(() => {
  const handler = (filesWithData) => {
  _.map(filesWithData, (event, data) => {
    console.log(data);
  })
};
ipcRenderer.on(METADATA_COMPLETED, handler);
  return () => ipcRenderer.removeListener(METADATA_COMPLETED, handler);
});

Index.js file

 ipcMain.on(FETCH_AUDIO_FILES, (event, files) => {
    const promises = _.map(files, (file) => {
    return new Promise((resolve, reject) => {
    NodeID3.read(file.path, (err, tags) => {
       resolve({
         ...files,
         ...tags
      })
    })
  })
});

Promise.all(promises).then(results => { 
  event.sender.send(METADATA_COMPLETED, results);
 [![enter image description here][1]][1]});
});