Okay, so the error is coming from line 37 where I am attempting to collect the timestamp for each post and then direct that information to my firebase storage. I can't quite figure what's causing the error or how I'm getting the error as I have imported my firebase.js file.

import React, { useState } from 'react';
import { Button } from '@material-ui/core';
import { storage, db } from './firebase';

function ImageUpload({username}) {
    const [image, setImage] = useState(null);
    const [progress, setProgress] = useState(0);
    const [caption, setCaption] = useState('');

const handleChange = (e) => {
    if (e.target.files[0]) {
        setImage(e.target.files[0]);
    }
};

const handleUpload = () => {
    const uploadTask = storage.ref('images/${image.name}').put(image);

    uploadTask.on(
        'state_changed',
        (snapshot) => {
            const progress = Math.round(
                (snapshot.bytesTransferred / snapshot.totalBytes) *100
            );
            setProgress(progress);
        },
        (error) => {
            console.log(error);
        },
        () => {
            storage
            .ref("images")
            .child(image.name)
            .getDownloadURL()
            .then(url => {
                db.collection("posts").add({
                    timestamp: firebase.firestore.FieldValue.serverTimestamp(),
                    caption: caption,
                    imageUrl: url,
                    username: username
                })
            })
        }
    )
}

return (
    <div>
        <input type="text" placeholder='Caption' onChange={event => setCaption(event.target.value)} value={caption}/>
        <input type="file" onChange={handleChange} />
        <Button className="imageUpload" onClick ={handleUpload}>Upload</Button>
    </div>
)

} export default ImageUpload