material-ui-dropzone+React Hook Formでドロップしたファイルを送信する。

Question

やりたいこと

material-ui-dropzone+React Hook Formでファイルの送信を行いたい。
submitを押下した際に、

handleSubmit(data => console.log(data))

でdata(file情報)のログを表示する。

現状：

できていること
<DropzoneArea/>でのファイル名の表示

onChange={(files) => console.log('Files:', files)} 

にて読み込んだファイル名とconsoleのログを表示する。

できていないこと

　const onSubmit = handleSubmit(data => {
　　console.log("values", data)
　})

にてconsoleのログを表示した際、{test:undefind}になりファイルが読みとれていない。

ソースコード

import { useCallback, useEffect, useMemo, useState, FC } from "react";
import { Controller, useForm } from "react-hook-form"
import { NextPage } from "next";
import {DropzoneArea} from 'material-ui-dropzone'


const Form: NextPage = () => {
　const { handleSubmit, control } = useForm();

　const onSubmit = handleSubmit(data => {
　　console.log("values", data)
　})

return (
      <>
        <form onSubmit={handleSubmit(data => console.log(data))}  noValidate>
          <Controller
            control={control}
            name="test"
            render={({ field }) => (
              <DropzoneArea
                filesLimit={1}
                showPreviews={true}
                showPreviewsInDropzone={false}
                useChipsForPreview
                previewGridProps={{container: { spacing: 1, direction: 'row' }}}
                previewChipProps={{classes: { root: classes.previewChip } }}
                previewText="Selected files"
                showAlerts={false} //これでアラートを非表示
                acceptedFiles={['image/*']}
                onChange={(files) => console.log('Files:', files)} //ここでファイルの設定
              />
            )}
          />

         <Button variant="contained" color="primary">
             <Typography variant="button" onClick={onSubmit}>更新</Typography>
         </Button>
      </form>
      </>
    )
}

export default Form

試したこと・悩んでんでいること

参考サイト：https://react-hook-form.com/jp/
を確認し、Controllerとname="test"を宣言し、利用する。

　const onSubmit = handleSubmit(data => {
　　console.log("values", data)
　})
// {test:undefind}

となるので設定自体はできているという認識で良いのでしょうか？

コードをどのように変更すれば、
material-ui-dropzone+React Hook Formの環境で
submitした際に選択したファイルの情報を取得し、ログに出すことができますでしょうか？
ご存知の方がいらっしゃいましたら、回答をよろしくお願いしたします。