Changed code according to requirements

src/App.jsx

@@ -3,43 +3,44 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import UserList from "./components/UserList";
 import UserDetails from "./components/UserDetails";
 import EditUser from "./components/EditUser";
-import './styles.css'; // Importing the CSS file
-
+import './styles.css';
+ 
+const RouteWithProps = ({ Component, props }) => {
+  return <Component {...props} />;
+};
+ 
 const App = () => {
   const [users, setUsers] = useState([]);
-
-  // Load users from localStorage on component mount
+ 
   useEffect(() => {
     const storedUsers = JSON.parse(localStorage.getItem("users")) || [];
     setUsers(storedUsers);
   }, []);
-
-  // Save users to localStorage whenever they change
+ 
   useEffect(() => {
     localStorage.setItem("users", JSON.stringify(users));
   }, [users]);
-
+ 
+  const sharedProps = { users, setUsers };
+ 
   return (
     <Router>
       <Routes>
-        {/* User List Route */}
         <Route
           path="/"
-          element={<UserList users={users} setUsers={setUsers} />}
+          element={<RouteWithProps Component={UserList} props={sharedProps} />}
         />
-        {/* User Details Route */}
         <Route
           path="/user/:id"
-          element={<UserDetails users={users} setUsers={setUsers} />}
+          element={<RouteWithProps Component={UserDetails} props={sharedProps} />}
         />
-        {/* Edit User Route */}
         <Route
           path="/edit/:id"
-          element={<EditUser users={users} setUsers={setUsers} />}
+          element={<RouteWithProps Component={EditUser} props={sharedProps} />}
         />
       </Routes>
     </Router>
   );
 };
-
-export default App;
+ 
+export default App;

src/components/UserDetails.jsx

@@ -5,19 +5,15 @@ const UserDetails = ({ users, setUsers }) => {
   const { id } = useParams();
   const navigate = useNavigate();
 
-  const userId = parseInt(id, 10); // Ensure id is a number
+  const userId = parseInt(id, 10); 
   const user = users.find((user) => user.id === userId);
 
   const handleDelete = () => {
-    console.log("Users before deletion:", users);
-    console.log("ID to delete:", userId);
 
     const updatedUsers = users.filter((user) => user.id !== userId);
-    console.log("Users after deletion:", updatedUsers);
-
-    setUsers([...updatedUsers]); // Create a new reference
+    setUsers([...updatedUsers]); 
     alert(`User with ID ${id} deleted.`);
-    navigate("/"); // Redirect to home
+    navigate("/");
   };
 
   if (!user) {