new File возвращает arrayBuffer

Я реализовываю на React функционал сжатия изображения при добавлении его в форму, для отправки на сервер уже сжатого изображения. Сжимаю через canvas, получаю в base64 через canvas.toDataUrl и его отправляю в такую функцию

const urltoFile = async (url, filename, mimeType) => {
    const res = await fetch(url);
    const buf = await res.arrayBuffer();        
    return new File([buf], filename, {type: mimeType});
}

После, ответ ложу в state. Но в state почему-то добавляется arrayBuffer, а не объект File. Хотя если вывести в консоль до setState, то выводит объект File.

В canvas у меня сжатая картинка

const compressData = canvas.toDataURL('image/jpeg', 0.7);
const file = await urltoFile(compressData, 'preview.jpg','image/jpeg');
console.log(file);
setForm({...form, imgSrc: compressData, file: {img: file} });