Fixed Packages Issues

frontend/package.json

@@ -18,13 +18,15 @@
     "@mui/icons-material": "^5.3.1",
     "@mui/material": "^5.4.0",
     "@mui/styled-engine-sc": "^5.3.0",
+    "@next/env": "^12.1.0",
     "axios": "^0.26.0",
     "nanoid": "^3.2.0",
     "next": "12.0.9",
     "qrcode": "^1.5.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "styled-jsx": "^5.0.0"
   },
   "license": "MIT",
   "repository": {

frontend/pages/index.js

@@ -5,13 +5,10 @@ import NavBar from 'components/NavBar'
 import Features from 'components/Features'
 
 export default function Home() {
-
-  const [shortUrl, setShortUrl] = useState(null);
-  const [longUrl, setLongUrl] = useState("");
-  const [qrData, setQrData] = useState("");
-  const [showQrCode , setShowQrCode] = useState(false);
   const [shortUrl, setShortUrl] = useState(null)
   const [longUrl, setLongUrl] = useState('')
+  const [qrData, setQrData] = useState('')
+  const [showQrCode, setShowQrCode] = useState(false)
 
   return (
     <>
@@ -27,10 +24,10 @@ export default function Home() {
           setShortUrl={setShortUrl}
           longUrl={longUrl}
           setLongUrl={setLongUrl}
-          qrData = {qrData}
-          setQrData = {setQrData}
-          showQrCode = {showQrCode}
-          setShowQrCode = {setShowQrCode}
+          qrData={qrData}
+          setQrData={setQrData}
+          showQrCode={showQrCode}
+          setShowQrCode={setShowQrCode}
         />
         <Features />
       </main>