add uuid package for more unique key props

package.json

@@ -14,7 +14,8 @@
 		"firebase": "^10.12.5",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"react-router-dom": "^6.26.0"
+		"react-router-dom": "^6.26.0",
+		"uuid": "^10.0.0"
 	},
 	"devDependencies": {
 		"@nabla/vite-plugin-eslint": "^2.0.4",

src/views/Home.jsx

@@ -1,6 +1,6 @@
 import './Home.css';
 import { SingleList } from '../components';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { createList, useAuth } from '../api';
 import { useNavigate } from 'react-router-dom';
 
@@ -40,15 +40,15 @@ export function Home({ data, setListPath }) {
 			<ul>
 				{data &&
 					data.map((list) => {
+						const uniqueId = crypto.randomUUID();
 						return (
-							<>
+							<Fragment key={uniqueId}>
 								<SingleList
-									key={crypto.randomUUID()}
 									name={list.name}
 									setListPath={setListPath}
 									path={list.path}
 								/>
-							</>
+							</Fragment>
 						);
 					})}
 			</ul>

src/views/List.jsx

@@ -1,7 +1,8 @@
 import { ListItem } from '../components';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Fragment } from 'react';
 import BasicModal from './Modal';
 import { comparePurchaseUrgency } from '../api';
+import { v4 as uuidv4 } from 'uuid';
 
 export function List({ data, userId }) {
 	const [filterVal, setFilterVal] = useState('');
@@ -82,14 +83,14 @@ export function List({ data, userId }) {
 			<ul>
 				{filteredObject &&
 					Object.entries(filteredObject).map(([timeBucket, list]) => (
-						<>
+						<Fragment key={uuidv4()}>
 							<div>
 								<h3>{labels[timeBucket]}</h3>
 							</div>
 							{list.map((item) => (
-								<ListItem key={item.id} item={item} />
+								<ListItem item={item} key={uuidv4()} />
 							))}
-						</>
+						</Fragment>
 					))}
 			</ul>
 		</>