Как загрузить изображение с моего компьютера и сохранить в хранилище Firebase с ReactJs

Question

Пишу код для топи c Управление продуктом . Это мой код для этого.

В моем файле Products.js, где я показываю весь список продуктов

import React, { useState, useEffect } from 'react';
import ProductForm from './ProductForm';
import firebaseDb from '../firebase';

const Products = () => {
    var [currentId, setCurrentId] = useState('');
    var [productObjects, setProductObjects] = useState({});

    useEffect(() => {
        firebaseDb.child('products').on('value', (snapshot) => {
            if (snapshot.val() != null) {
                setProductObjects({
                    ...snapshot.val(),
                });
            }
        });
    }, []);

    const addOrEdit = (obj) => {
        if (currentId === '')
            firebaseDb.child('products').push(obj, (err) => {
                if (err) console.log(err);
                else setCurrentId('');
            });
        else
            firebaseDb.child(`products/${currentId}`).set(obj, (err) => {
                if (err) console.log(err);
                else setCurrentId('');
            });
    };

    const onDelete = (id) => {
        if (window.confirm('Are you sure to delete this record?')) {
            firebaseDb.child(`products/${id}`).remove((err) => {
                if (err) console.log(err);
                else setCurrentId('');
            });
        }
    };

    return (
        <>
            <div className="jumbotron jumbotron-fluid">
                <div className="container">
                    <h1 className="display-4 text-center">Products Manager</h1>
                </div>
            </div>
            <div className="row">
                <div className="col-md-5">
                    <ProductForm {...{ currentId, productObjects, addOrEdit }} />
                </div>
                <div className="col-md-7">
                    <table className="table table-borderless table-stripped">
                        <thead className="thead-light">
                            <tr>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Price</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {Object.keys(productObjects).map((key) => (
                                <tr key={key}>
                                    <td>{productObjects[key].image}</td>
                                    <td>{productObjects[key].name}</td>
                                    <td>{productObjects[key].category}</td>
                                    <td>{productObjects[key].price}</td>
                                    <td className="bg-light">
                                        <a
                                            type="button"
                                            className="btn text-primary"
                                            onClick={() => {
                                                setCurrentId(key);
                                            }}
                                        >
                                            <i className="fas fa-pencil-alt"></i>
                                        </a>
                                        <a
                                            type="button"
                                            className="btn text-danger"
                                            onClick={() => {
                                                onDelete(key);
                                            }}
                                        >
                                            <i className="far fa-trash-alt"></i>
                                        </a>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </>
    );
};

export default Products;

И это мой код для добавления продукта по форме, файл ProductForm. js

import React, { useState, useEffect } from 'react';

const ProductForm = (props) => {
    const initialFieldValues = {
        image: '',
        name: '',
        category: '',
        price: '',
    };

    var [values, setValues] = useState(initialFieldValues);

    useEffect(() => {
        if (props.currentId === '') setValues({ ...initialFieldValues });
        else
            setValues({
                ...props.contactObjects[props.currentId],
            });
    }, [props.currentId, props.contactObjects]);

    const handleInputChange = (e) => {
        var { name, value } = e.target;
        setValues({
            ...values,
            [name]: value,
        });
    };

    const handleFormSubmit = (e) => {
        e.preventDefault();
        props.addOrEdit(values);
    };

    return (
        <form autoComplete="off" onSubmit={handleFormSubmit}>
            <div className="form-group input-group">
                <div className="input-group-prepend">
                    <div className="input-group-text">
                        <i className="fas fa-user"></i>
                    </div>
                </div>
                <input
                    className="form-control"
                    name="image"
                    placeholder="Image"
                    value={values.image}
                    onChange={handleInputChange}
                />
            </div>
            <div className="form-row">
                <div className="form-group input-group col-md-6">
                    <div className="input-group-prepend">
                        <div className="input-group-text">
                            <i className="fas fa-name-alt"></i>
                        </div>
                    </div>

                    <input
                        className="form-control"
                        name="name"
                        placeholder="Name"
                        value={values.name}
                        onChange={handleInputChange}
                    />
                </div>
                <div className="form-group input-group col-md-6">
                    <div className="input-group-prepend">
                        <div className="input-group-text">
                            <i className="fas fa-envelope"></i>
                        </div>
                    </div>
                    <input
                        className="form-control"
                        name="category"
                        placeholder="Category"
                        value={values.category}
                        onChange={handleInputChange}
                    />
                </div>
            </div>
            <div className="form-group">
                <input
                    className="form-control"
                    name="price"
                    placeholder="Price"
                    value={values.price}
                    onChange={handleInputChange}
                />
            </div>
            <div className="form-group">
                <input
                    type="submit"
                    value={props.currentId === '' ? 'Save' : 'Update'}
                    className="btn btn-primary btn-block"
                />
            </div>
        </form>
    );
};

export default ProductForm;

У меня проблема с этим, как вы видите в моем product management, мне нужно добавить текст для формы ввода изображения, а не изображение из компьютерного файла, Я хочу добавить фотографию и загрузить ее с компьютера, а также сохранить в firebase. Как я могу добавить это в свой код.

Может ли кто-нибудь поддержать меня, мне действительно нужна ваша помощь, я впервые работаю с firebase, и мне это так сложно понять.

Большое спасибо за помощь.