I am getting stack trace error and can't resolve it - reactjs

Question

I am getting the following error and i cant figure out what do to.
Uncaught Error: The error you provided does not contain a stack trace.
at L (index.js:1)
at Y (index.js:1)
at index.js:1
at index.js:1
at o (index.js:1)
import React, { useState, useEffect } from "react";
import "./App.css";
import Post from "./Post";
import { db, auth } from "./firebase";
import { Button, Modal, Input } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
function getModalStyle() {
const top = 50;
const left = 50;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: "absolute",
width: 400,
backgroundColor: theme.palette.background.paper,
border: "2px solid #000",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
function App() {
const classes = useStyles();
const [modalStyle] = React.useState(getModalStyle);
const [posts, setPosts] = useState([]);
const [open, setOpen] = useState(false);
const [username, setUsername] = useState();
const [password, setPassword] = useState();
const [email, setEmail] = useState();
useEffect(() => {
db.collection("posts").onSnapshot((snapshot) => {
setPosts(snapshot.docs.map((doc) => ({ id: doc.id, post: doc.data() })));
});
}, []);
const signUp = (e) => {
e.preventDefault();
auth
.createUserWithEmailAndPassword(email, password)
.catch((error) => alert(error.message));
};
return (
// header
<div className="app">
<Modal open={open} onClose={() => setOpen(false)}>
<div style={modalStyle} className={classes.paper}>
<form action="" className="app-signup">
<center>
<img
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
alt="instagram"
className="app-headerImage"
/>
</center>
<Input
type="text"
placeholder="userName"
value={username}
onChange={(e) =>
setUsername(e.target.value)}
/>
<Input
type="text"
placeholder="email"
value={email}
onChange={(e) =>
setEmail(e.target.value)}
/>
<Input
type="password"
placeholder="password"
value={password}
onChange={(e) =>
setPassword(e.target.value)}
/>
<Button onClick=
{signUp}>signUp</Button>
</form>
</div>
</Modal>
<div className="app-header">
<img
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
alt="instagram"
className="app-headerImage"
/>
</div>
<Button onClick={() =>
setOpen(true)}>Signup</Button>
{posts.map(({ post, id }) => {
const { userName, caption, imageUrl } = post;
return (
<Post
key={id}
userName={userName}
caption={caption}
imageUrl={imageUrl}
/>
);
})}
</div>
//posts
//posts
);
}
export default App;