Form.File for image upload not working in react

Question

I have this code to upload an image with react but it is not working and i have no idea why ? can someone help plz

return (
    <div>
        <FormContainer>
            <h1>Edit Product</h1>

            {loading ? <Loader /> : error ? <Message variant='danger'>{error}</Message>
                : (
                    <Form onSubmit={submitHandler}>


                        <Form.Group controlId='image'>
                            <Form.Label>Image</Form.Label>
                            <Form.Control

                                type='text'
                                placeholder='Enter image'
                                value={image}
                                onChange={(e) => setImage(e.target.value)}
                            >
                            </Form.Control>

                            <Form.File
                                id='image-file'
                                label='Choose File'
                                onChange={uploadFileHandler}
                                custom
                            >

                            </Form.File>
                            {uploading && <Loader />}

                        </Form.Group>

                        <Button type='submit' variant='primary'>
                            Update
                    </Button>

                    </Form>
                )}

        </FormContainer >
    </div>

)

the problem is with Form.File cz when i delete it the form will load

Here the error i get in the console : react-dom development js 28439 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`.

Answer 1

So the problem was Form.File is not from react-bootstrap v2 it must be from v1 The solution was to replace this:

<Form.File
     id='image-file'
     label='Choose File'
     onChange={uploadFileHandler}
     custom
>

With Form Control like that :

                            

<Form.Control
    type='file'
    id='image-file'
    label='Choose File'
    custom
    onChange={uploadFileHandler}
>