nextjs antd image upload

import { Edit, useForm } from "@refinedev/antd";  
import { getValueProps, mediaUploadMapper } from "@refinedev/strapi-v4";  
import { Form, Upload } from "antd";  
  
import { TOKEN_KEY, API_URL } from "../../constants";  
import { IPost } from "../interfaces";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>({  
 metaData: { populate: ["cover"] },  
 });  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form  
 {...formProps}  
 layout="vertical"  
 onFinish={(values) => {  
 formProps.onFinish?.(mediaUploadMapper(values));  
 }}  
 >  
 <Form.Item label="Cover">  
 <Form.Item  
 name="cover"  
 valuePropName="fileList"  
 getValueProps={(data) => getValueProps(data, API_URL)}  
 noStyle  
 >  
 <Upload.Dragger  
 name="files"  
 action={`${API_URL}/api/upload`}  
 headers={{  
 Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,  
 }}  
 listType="picture"  
 multiple  
 >  
 <p className="ant-upload-text">Drag & drop a file in this area</p>  
 </Upload.Dragger>  
 </Form.Item>  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};