...

package.json

@@ -1,18 +1,18 @@
 {
   "name": "project_youtube_video_player",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "^5.0.5",
-    "@mui/material": "^5.0.6",
-    "axios": "^0.24.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-player": "^2.9.0",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3"
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.9.3",
+    "axios": "^0.27.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-player": "^2.10.1",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,20 +1,20 @@
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { Box } from '@mui/material';
 
 import { ChannelDetail, VideoDetail, SearchFeed, Navbar, Feed } from './components';
 
 const App = () => (
-  <Router>
+  <BrowserRouter>
     <Box sx={{ backgroundColor: '#000' }}>
       <Navbar />
-      <Switch>
-        <Route exact path='/' component={Feed} />
-        <Route path='/video/:id' component={VideoDetail} />
-        <Route path='/channel/:id' component={ChannelDetail} />
-        <Route path='/search/:searchTerm' component={SearchFeed} />
-      </Switch>
+      <Routes>
+        <Route exact path='/' element={<Feed />} />
+        <Route path='/video/:id' element={<VideoDetail />} />
+        <Route path='/channel/:id' element={<ChannelDetail />} />
+        <Route path='/search/:searchTerm' element={<SearchFeed />} />
+      </Routes>
     </Box>
-  </Router>
+  </BrowserRouter>
 );
 
 export default App;

src/components/Navbar.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Stack } from "@mui/material";
 import { Link } from "react-router-dom";
 
-import Logo from "../logo.png";
+import Logo from "../utils/logo.png";
 import { SearchBar } from "./";
 
 const Navbar = () => (

src/components/SearchBar.jsx

@@ -1,17 +1,17 @@
 import React, { useState } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from "react-router-dom";
 import { Paper, IconButton } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 
 const SearchBar = () => {
   const [searchTerm, setSearchTerm] = useState('');
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const onhandleSubmit = (e) => {
     e.preventDefault();
 
     if (searchTerm) {
-      history.push(`/search/${searchTerm}`);
+      navigate.push(`/search/${searchTerm}`);
 
       setSearchTerm('');
     }

src/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 import App from './App';
 import './index.css';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );