fix: types & build

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>

src/components/Container.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useLayoutEffect } from "react";
 import { css, cx } from "@emotion/css";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import { ReactComponent as Logo } from "../assets/logo.svg";
 import { ReactComponent as Right } from "../assets/arrow-right.svg";
@@ -24,7 +24,7 @@ const Container: React.FunctionComponent<{
 	className,
 	...props
 }) => {
-	const history = useHistory();
+	const navigate = useNavigate();
 
 	const mobile = useMediaQuery("(max-width: 50rem)");
 
@@ -109,7 +109,7 @@ const Container: React.FunctionComponent<{
 		document.body.style.maxHeight = "100vh";
 		document.body.style.overflow = "hidden";
 		e.currentTarget.style.width = "0";
-		timer(() => next && history.push(next), 300);
+		timer(() => next && navigate(next), 300);
 	};
 
 	return (
@@ -191,7 +191,7 @@ const Container: React.FunctionComponent<{
 						)}>
 						<Logo
 							viewBox="0 0 264 264"
-							onClick={() => (mobile ? setShowMenu(true) : history.push("/"))}
+							onClick={() => (mobile ? setShowMenu(true) : navigate("/"))}
 						/>
 					</span>
 					<Menu show={showMenu} setShowMenu={setShowMenu} />

src/components/Dashed.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { css } from "@emotion/css";
 
-const Dashed: React.FunctionComponent = ({ children }) => (
+const Dashed: React.FC<{ children: React.ReactNode }> = ({ children }) => (
 	<span
 		className={css`
 			border-bottom: 1px dashed var(--text-colour);

src/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import "./index.css";
 
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
@@ -13,7 +13,7 @@ import Live from "./pages/main/Live";
 
 import NotFound from "./pages/main/404";
 
-ReactDOM.render(
+createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
 		<Router>
 			<Routes>
@@ -23,9 +23,8 @@ ReactDOM.render(
 				<Route path="/contact" element={<Contact />} />
 				<Route path="/live" element={<Live />} />
 
-				<Route path="/*" element={NotFound} />
+				<Route path="/*" element={<NotFound />} />
 			</Routes>
 		</Router>
 	</React.StrictMode>,
-	document.getElementById("root"),
 );