我为一个表单编写了这段代码来收集图像和文本数据，它运行良好，没有任何错误，但在浏览器中，除了一个空白屏幕外什么也没有显示。

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { useDropzone } from 'react-dropzone';

const Form = () => {
  const { register, handleSubmit } = useForm();
  const [images, setImages] = useState([]);
  const { getRootProps, getInputProps } = useDropzone({
    accept: 'image/*',
    onDrop: acceptedImages => {
      setImages(acceptedImages.map(image => Object.assign(image, {
        preview: URL.createObjectURL(image)
      })));
    }
  });

  const onSubmit = async data => {
    const formData = new FormData();
    images.forEach(image => {
      formData.append('images', image);
    });
    formData.append('name', data.name);
    formData.append('description', data.description);

    try {
      const response = await fetch('http://localhost:8000/submit-form', {
        method: 'POST',
        body: formData
      });
      console.log(response);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <br />
      {images.map(image => (
        <img key={image.name} src={image.preview} alt={image.name} style={{ width: '200px' }} />
      ))}
      <br />
      <input name="name" ref={register} placeholder="Name" />
      <br />
      <textarea name="description" ref={register} placeholder="Description" />
      <br />
      <button type="submit">Submit</button>
    </form>
    
  );
}

export default Form

我希望在浏览器中看到一个表单，至少看看它是否真的工作，但我什么也没看到。我在表单上使用了react Dropzone和react hook form。也许还可以获取数据。