changed key for list items, shnged the way things are imported from MUI

src/views/Home.jsx

@@ -1,23 +1,18 @@
-import './Home.css';
-import { SingleList } from '../components/SingleList';
-import { useEffect, useState, useRef } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Input from '@mui/material/Input';
+import InputLabel from '@mui/material/InputLabel';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { useEffect, useRef, useState } from 'react';
 import { createList } from '../api/firebase';
-import {
- InputLabel,
- Input,
- Box,
- Button,
- Stack,
- Grid,
- Typography,
-
- useMediaQuery,
-
- Link,
- Container,
-
-} from '@mui/material';
 import { SignInButton } from '../api/useAuth';
+import { SingleList } from '../components/SingleList';
+import './Home.css';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Link from '@mui/material/Link';
+import Container from '@mui/material/Container';
 
 export function Home({ data, setListPath, userEmail, userId }) {
  const [shoppingListName, setShoppingListName] = useState('');

src/views/List.jsx

@@ -369,9 +369,9 @@ export function List({ data, listPath }) {
  <Grid container spacing={2}>
  {filteredData.map((item) => {
  return (
- <Grid item xs={12} md={6}>
+ <Grid item xs={12} md={6} key={item.id}>
  <ListItem
- key={item.id}
+ // key={item.id}
  daysUntilNextPurchase={item.daysUntilNextPurchase}
  dateLastPurchased={item.dateLastPurchased}
  itemId={item.id}