Реагируйте с Firebase: добавьте «галерею изображений» с альтернативным текстом (alt)

Question

Что я пытаюсь сделать: Я создаю форму React, где я могу добавить «проект» в базу данных с заголовком, описанием и галереей объектов с изображениями (URL) и альтернативным текстом для каждого.,Затем в другом компоненте вытащите эту информацию и отобразите на странице.

Что я могу сделать: Я могу загрузить изображение в хранилище Firebase и отправить ProjectName, Description и ссылку на базу данных, но у меня возникла проблема с добавлением болееодно изображение с альтернативным текстом в базе данных.

С чем у меня проблема: У меня проблема с дескриптором, изменить входное изображение и заголовок вместе и добавить в состояние.

    render() {
    console.log(this.state.images)
    const inputImage = this.state.images.map((index) => (
        <div className="form-row" key={index}>
            <div className="form-label">
                <label htmlFor="imgTitle">Tytuł obrazka</label>
            </div>
            <div className="form-field">
                <input type="text" id="imgTitle" name="imgTitle" value={imgTitle} onChange={(e) => this.handleChangeImage(e, index)} placeholder="Opis obrazka" />
            </div>
            <div className="form-label"><label htmlFor="image">Zdjęcia</label></div>
            <div className="form-field">
                <input type="file" name="image" id="image" accept="image/*" onChange={(e) => this.handleChangeImage(e, index)} />
            </div>
        </div>
    ))
    return (
        <div className="container" >
            <form className="form-container" onSubmit={this.handleSubmit}>
                <div className="form-row">
                    <div className="form-label">
                        <label htmlFor="title">Tytuł projektu</label>
                    </div>
                    <div className="form-field">
                        <input type="text" id="title" name="title" value={this.state.username} onChange={this.handleChange} placeholder="Tytuł projektu" />
                    </div>

                </div>
                <div className="form-row">
                    <div className="form-label"><label htmlFor="descriptiom">Opis</label></div>
                    <div className="form-field">
                        <textarea name="description" id="description" cols="30" rows="10" onChange={this.handleChange} placeholder="Opis projektu"></textarea>
                    </div>
                </div>
                {inputImage}
                <button onClick={() => this.handleAddInputImage()}>Dodaj zdjęcie</button>
                <button>Dodaj</button>
            </form>
        </div>