Form.File is invoking error React.jsx: type is invalid -- expected a string or a class/function (for composite components) but got: undefined

Question

I am trying to upload a image to website using react with multer.And in the process i am stuck because the Form.File is undefined and i dont know how to overcome this.

Here is the ProductEditScreen.js

import React, { useState, useEffect } from "react";
import { Form, Button } from "react-bootstrap";
import FormContainer from "../components/FormContainer";

const ProductEditScreen = () => {
  const [image, setImage] = useState("");
  const [uploading, setUploading] = useState(false);
  const uploadFileHandler = async (e) => {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append("image", file);
    setUploading(true);
  };
  const submitHandler = (e) => {
    console.log("action");
  };

  return (
    <>
      <FormContainer>
        <Form onSubmit={submitHandler}>
          <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>
          </Form.Group>

          <Button type="submit" variant="primary">
            Update
          </Button>
        </Form>
      </FormContainer>
    </>
  );
};

export default ProductEditScreen;

And this ProductEditScreen is used in the App.js as

import ProductEditScreen from "./screens/ProductEditScreen";
const App = () => {
  return (
    <BrowserRouter>
      <Header />
      <main className="py-3">
        <Container>
          <Routes>
            <Route
              path="/admin/product/:id/edit"
              element={<ProductEditScreen />}
            />
          </Routes>
        </Container>
      </main>

      <Footer />
    </BrowserRouter>
  );
};

Error displayed in the console are:

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.

Check your code at ProductEditScreen.js:30.
    at ProductEditScreen (http://localhost:3000/static/js/bundle.js:5892:76)
    at Routes (http://localhost:3000/static/js/bundle.js:60546:5)
    at div
    at http://localhost:3000/static/js/bundle.js:27569:5
    at main
    at Router (http://localhost:3000/static/js/bundle.js:60479:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:59955:5)
    at App
    at Provider (http://localhost:3000/static/js/bundle.js:57170:20)

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.

Check the render method of `ProductEditScreen`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058:1)
    at createFiberFromElement (react-dom.development.js:25086:1)
    at createChild (react-dom.development.js:13446:1)
    at reconcileChildrenArray (react-dom.development.js:13719:1)
    at reconcileChildFibers (react-dom.development.js:14125:1)
    at reconcileChildren (react-dom.development.js:16990:1)
    at updateHostComponent (react-dom.development.js:17632:1)
    at beginWork (react-dom.development.js:19080:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)

How to get over with this ? Or is there any other alternative method where i can call my method uploadFileHandler when the file is choosed.