Undefinede in register.jsx:51

I’ve really been looking for a solution to this error for a while, I’ve looked everywhere, I’ve searched here, on YouTube, I even tried using chatgpt to see if he knew and nothing……some son of god can do it tell me what is going wrong in my code? I swear I don’t know and it’s probably something very ridiculous that I can’t see……
my entire register.jsx code looks like this:

import React, {useState} from 'react';
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
import {auth, db, storage} from "../firebase";
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { doc, setDoc } from "firebase/firestore";

const Register = () => {
    const [err, setErr] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();

        const displayName = e.target[0].value.trim(); // sanitize display name
        const email = e.target[1].value;
        const password = e.target[2].value;
        const file = e.target[3].files[0];

        try {
            const res = await createUserWithEmailAndPassword(auth, email, password);

            const storageRef = ref(storage, `${displayName}_${Date.now()}`); // use sanitized display name as storage ref

            const uploadTask = uploadBytesResumable(storageRef, file);

            uploadTask.on(
                'state_changed',
                (snapshot) => {
                    // handle progress or error events
                },
                async () => {
                    try {
                        const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);

                        await updateProfile(res.user,{
                            displayName,
                            photoURL: downloadURL,
                        });

                        await setDoc(doc(db, "users", res.user.uid), {
                            uid: res.user.uid,
                            displayName,
                            email,
                            photoURL: downloadURL,
                        });
                    } catch (error) {
                        console.error(error);
                        setErr(true);
                    }
                },
                (error) => {
                    console.error(error);
                    setErr(true);
                }
            );

        } catch (error) {
            console.error(error);
            setErr(true);
        }
    };

    return (
        <div className="formContainer">
            <div className="formWrapper">
                <span className='main_logo'></span>
                <span className="logo">AMICA</span>
                <span className="title">Register</span>
                <form onSubmit={handleSubmit}>
                    <input type="text" placeholder="display name"/>
                    <input type="email" placeholder="email"/>
                    <input type="password" placeholder="password"/>
                    <input style={{display: 'none'}} type="file" id='file'/>
                    <label id='upload_img' htmlFor="file">
                        <span id='img_icon'><i className="fi fi-br-picture"></i></span>
                    </label>
                    <label htmlFor="file" id='img_name'>Select an image</label>
                    <button>Sign up</button>
                    {err && <span>Something went wrong</span>}
                </form>
                <p>You do have an account? Login</p>
            </div>
        </div>
    )
}

export default Register;

I tried to fix it looking in many places and even in the doc to see if there was something wrong with the way I was writing and I didn’t find anything, I hoped that he could send the information like the displayname, email, password and photo in png/jpg format for firebase firestore