Estoy tratando de cargar una imagen en el sitio web usando reaccionar con multer. Y en el proceso estoy atascado porque el Form.File no está definido y no sé cómo superar esto.

Aquí está el ProductEditScreen.js

 import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import { Form, Button } from "react-bootstrap"; import FormContainer from "../components/FormContainer"; const ProductEditScreen = ({ match, history }) => { const productId = match.params.id; const [image, setImage] = useState(""); const [uploading, setUploading] = useState(false); const submitHandler = (e) => {}; ... return ( <> <Link to="/admin/productlist" className="btn btn-light my-3"> Go Back </Link> <FormContainer> <h1>Edit Product</h1> {loadingUpdate && <Loader />} {errorUpdate && <Message variant="danger">{errorUpdate}</Message>} {loading ? ( <Loader /> ) : error ? ( <Message variant="danger">{error}</Message> ) : ( <Form> ... <Form.Group controlId="image"> <Form.Label>Image</Form.Label> <Form.Control type="text" placeholder="Enter image url" value={image} onChange={(e) => setImage(e.target.value)} ></Form.Control> <Form.File id="image-file" label="Choose File" custom onChange={uploadFileHandler} ></Form.File> {uploading && <Loader />} </Form.Group> ... </Form> )} </FormContainer> </> ); };

Me está dando un error y una advertencia como se muestra en las siguientes líneas de código.

 react-jsx-dev-runtime.development.js:117 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.