Error: Invalid hook call. Hooks can only be called inside of the body of a function component. : react-dropzone

I implemented the component by referring to the source in react-dropzone, but the following error occurred.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

enter image description here

<FileUpload.js>

import React, { useState } from 'react'
import {Typography, Button, Form, Input} from 'antd';
import FileUpload from '../../utils/FileUpload';

const {TextArea} = Input;
 
const Continents = [
  {key:1, value:"Africa"},
  {key:2, value:"Europe"},
  {key:3, value:"Asia"},
  {key:4, value:"North America"},
  {key:5, value:"South America"},
  {key:6, value:"Australia"},
  {key:7, value:"Antactica"},
]

function UploadProductPage() {
  
  const [Title, setTitle] = useState("")
  const [Description, setDescription] = useState("")
  const [Price, setPrice] = useState(0)
  const [Continent, setContinent] = useState(1)
  const [Images, setImages] = useState(1)

  const titleChangeHandler = (event) => {
      setTitle(event.currentTarget.value)
  }
  
  const descriptionChangeHandler = (event) => {
      setDescription(event.currentTarget.value)
  }

  const priceChangeHandler = (event) => {
      setPrice(event.currentTarget.value)
  }

  const continentChangeHandler =(event) => {
    setContinent(event.currentTarget.value)
    console.log(event.currentTarget.value)
  }


return (
    <div style ={{maxWidth:'700px',margin:'2em auto'}}>
        <div style={{textAlign:'center',marginButtom:'2em'}}>
            <h2 level={2}>product upload</h2>
        </div>
        
        <FileUpload/>

        <Form>
          <br/>
          <br/>
          <label>name</label>
          <Input onChange ={titleChangeHandler} value={Title}/>
          <br/>
          <br/>
          <label>description</label>
          <TextArea onChange={descriptionChangeHandler}/>
          <br/>
          <br/>
          <label>price($)</label>
                    <Input onChange={priceChangeHandler}/>
          <br/>
          <br/>
          <select onChange={continentChangeHandler} value={Continent}>
              {Continents.map(item => (
                  <option key={item.key} value={item.key}>{item.value}</option>
              ))}
          </select>
          <br/>
          <br/>
          <Button>
            OK
          </Button>
        
        </Form>
    </div>
  )
}

<UploadProductPage.js>

import React from 'react'
import Dropzone from 'react-dropzone'

function FileUpload() {
  return (
    <div style={{ display: 'flex', justifyContent:'space-between'}}>
      <Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
        {({getRootProps, getInputProps})=>(
            <div style={{
                width: 300, height:240, border:'1px solid lightgray',
                display:'flex', alignItems:'center', justifyContent:'center'}}
                {...getRootProps()}>
                <input {...getInputProps()}/>
                  <p>Drag 'n' drop some files here, or click to select files</p>
            </div>
        )}
      </Dropzone>
    </div>
  )
}

export default FileUpload