I'm working with Firebase and i'm doing a fileuploader

Whenever i try to upload an image, i get my own created error that it's not the right file type. I tried adding different file types and adding more acceptable file types.

import React, { Fragment, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import "./FileUpload.css";
import ProgressBar from "./ProgressBar";

const FileUpload = () => {
  const [file, setFile] = useState(null);
  const [error, setError] = useState(null);
  const types = ["image/png, image/gif, image/jpeg"];

  const uploadHandler = (e) => {
    const selected = e.target.files[0];
    console.log(selected);

    if (selected && types.includes(selected.type)) {
      setFile(selected);
      setError(" ");
    } else {
      setFile(null);
      setError("Please pick an image file that is a png or jpg");
    }
  };

  return (
    <Fragment>
      <div className="file-card">
        <div className="file-inputs">
          <input type="file" className="input-files" onChange={uploadHandler} />
          <button className="button-files">
            <i className="button-i">
              <FontAwesomeIcon icon={faPlus} />
            </i>
          </button>
        </div>

        <p className="main">Supported Files</p>
        <p className="info">PDF, JPG,PNG</p>
      </div>
      <div className="output">
        {error && <div className="error">{error}</div>}
        {file && <div>{file.name}</div>}
        {file && <ProgressBar file={file} setFile={setFile} />}
      </div>
    </Fragment>
  );
};

export default FileUpload;

This is what shows when i try to upload a file. It's the right file type. it just doesn't upload. I tried adding different acceptable ones and still get the same issue.

I created this hook for storage, in order to decrease the code i have in my file uploader. The hook should be in charge of adding the files to firebase.

import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { projectStorage } from "../../firebase";
import { useEffect, useState } from "react";

const useStorage = (file) => {
  const [progress, setProgress] = useState(0);
  const [error, setError] = useState(null);
  const [url, setUrl] = useState(null);

  useEffect(() => {
    const storageRef = ref(projectStorage, "images/" + file.name);
    console.log(storageRef);

    const uploadTask = uploadBytesResumable(storageRef, file);

    uploadTask.on(
      "state_changed",
      (snapshot) => {
        let percentage =
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        setProgress(percentage);
      },
      (err) => {
        setError(err);
      },
      () => {
        getDownloadURL(uploadTask.snapshot.ref).then((url) => setUrl(url));
      }
    );
  }, [file]);
  return { progress, url, error };
};

export default useStorage;