how can i add image in the form so it saves to the collection of this?
here is my code
import { Text, View, TextInput, Pressable, ScrollView } from 'react-native';
import { gStyle } from '../styles/style';
import React, {useState} from 'react';
import Footer from '../components/Footer';
import Header from '../components/Header';
import { firebase } from '../Firebase/firebase';
import 'firebase/compat/auth';
import 'firebase/compat/database';
import 'firebase/compat/firestore';
import React, {useState, useEffect} from 'react';
import { useNavigation } from '@react-navigation/native';

export default function FormAddMK() {
    const [text, setValue] = useState('');
    const [name, setName] = useState('');
    const [description, setDescription] = useState('');
    const [price, setPrice] = useState('');
    const [time, setTime] = useState('');
    const [timeOfMK, setTimeOfMK] = useState('');
    const [person, setPerson] = useState('');
    const [image, setImage] = useState(null);

    const onChangeName = (text) => setName(text);
    const onChangeDescription = (text) => setDescription(text);
    const onChangePrice = (text) => setPrice(text);
    const onChangeTime = (text) => setTime(text);
    const onChangeTimeOfMK = (text) => setTimeOfMK(text);
    const onChangePerson = (text) => setPerson(text);
    const onChangeImage = (event) => {
    const file = event.target.files[0];
    setImage(file);
    };
    const addHandler = async () => {
        const storageRef = firebase.storage().ref();
        const imageRef = storageRef.child(`images/${Date.now()}`);
        const uploadTask = imageRef.put(image);
        uploadTask.on(
        'state_changed',
        null,
        (error) => {
        console.log(error);
        },
        async () => {
        const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
        firebase.database().ref('FutureMK').push({
        id: Date.now(),
        name: name,
        description: description,
        price: price,
        time: time,
        timeOfMK: timeOfMK,
        person: person,
        image: image
        })
    })}
  return (
    <View>
<ScrollView>
    <Header/>
    <View style={gStyle.formAdd}>
        <Text style={gStyle.header}>Добавить мастер-класс</Text>
        <View style={gStyle.formBlock}>
            <View>
                <Text>Название мастер-класса</Text>
                <TextInput style={gStyle.inputForm} onChangeText={onChange}
                />
            </View>
            <View>
                <Text>Дата мастер-класса</Text>
                <TextInput style={gStyle.inputForm} onChangeText={onChange}
                />
            </View>
            <View>
                <Text>Описание мастер-класса</Text>
                <TextInput style={gStyle.inputForm} onChangeText={onChange}
                />
            </View>
            <View>
                <Text>Изображение</Text>
                <TextInput style={gStyle.inputForm} onChangeText={onChange}
                />
            </View>
            <View>
                <Text>Стоимость мастер-класса</Text>
                <TextInput style={gStyle.inputForm} onChangeText={onChange}
                />
            </View>
            <View>
                <Text>Кол-во людей на бронирование</Text>
                <TextInput style={gStyle.inputForm} onChangeText={onChange}
                />
            </View>
            <View>
                <Text>Продолжительность мастер-класса</Text>
                <TextInput style={gStyle.inputForm} onChangeText={onChange}
                />
            </View>
        <Pressable style={gStyle.btnAddMK} onPress={()=>addHandler(text)}>
            <Text style={gStyle.btnAddMKtxt}>Сохранить</Text>
        </Pressable>
        </View>
  </View>
  <Footer/>
  </ScrollView>
  </View>

  );
}