my AddProduct component is "import React, { useState ,useEffect} from 'react';
import { useNavigate } from 'react-router-dom';
import { TextField, Button, Box, Typography, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
import { styled } from '@mui/system';
import { addProduct ,getAllCategory}from '../services/productService';

const StyledImage = styled('img')({
  maxWidth: '100%',
  maxHeight: '200px',
  margin: '8px',
});

//const backendURL = 'http://localhost:8000';

const AddProduct = () => {
  const navigate = useNavigate();
  const [categories, setCategories] = useState([]);
  const [imge, setImge] = useState({
    image1: '', image2: '', image3: '', image4: '',
  });

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const categoryData = await getAllCategory();
        setCategories(categoryData);
      } catch (error) {
        console.error('Failed to fetch categories:', error);
      }
    };

    fetchCategories();
  }, []);
  const [server_error, setServerError] = useState({});
  // const [success , setSuccess] = useState(false)
  const [data, setdata] = useState({
      product_Name: '',
      product_isSale: 'Yes',
      product_Price: '',
      product_Stock: '',
      product_Description: '',
      image1: null,
      image2: null,
      image3: null,
      image4: null,
      category_Name: '',
  })
  const handleInputChange = event => {
    const name = event.target.name;
    const value = event.target.value;
    setdata(values => ({ ...values, [name]: value }));
  };

  const handleImageChange = event => {
    console.log(event.target.files);
    const name = event.target.name;
    const file = event.target.files[0];
    console.log("AAA",file);
    setImge(values => ({ ...values, [name]: file }));
    if (!data[name]) {
        const objectUrl = URL.createObjectURL(file);
        setdata(values => ({ ...values, [name]: objectUrl }));
      }
  };

  const handleSubmit = async(e) => {
    e.preventDefault()
    let formData = new FormData();
    formData.append('image1', imge.image1);
    formData.append('image2', imge.image2);
    formData.append('image3', imge.image3);
    formData.append('image4', imge.image4);
    formData.append('product_Name', data.product_Name);
    formData.append('product_isSale', data.product_isSale);
    formData.append('product_Price', data.product_Price);
    formData.append('product_Stock',  data.product_Stock);
    formData.append(' product_Description', data.product_Description);
    formData.append('category_Name', data.category_Name);

    try{
        const res = await addProduct(formData)
        console.log('QQQ',res.error.data.errors.details);
        console.log('QQQ1',res.error.data.errors.error);
        if (res.error) {
          console.log('Error in response:', res.error);
  
          if (res.error.data && res.error.data.errors) {
              console.log('Errors:', res.error.data.errors);
              setServerError(res.error.data.errors.error); // Display errors in UI
              
              // Function to process and format nested errors
              const formatErrors = (errors) => {
                  // If errors is an object, iterate over its entries
                  if (typeof errors === 'object' && errors !== null) {
                      return Object.entries(errors).flatMap(([key, value]) => {
                          // Recursively format nested errors
                          if (typeof value === 'object') {
                              return [`${key}:\n${formatErrors(value).join('\n')}`];
                          }
                          return [`${key}: ${value}`];
                      });
                  }
                  return [errors];
              };
  
              const formattedErrors = formatErrors(res.error.data.errors.details);
              console.log('Formatted Errors:', formattedErrors.join('\n'));
          }
      } else if (res.data) {
            console.log(typeof (res.data));
            console.log(res.data);
            // setSuccess(true);
            if (res.data || res.data.status === 201) { // Check for success flag or status code
                navigate('/product/list');
            }
          }
    }
    catch (error) {
      console.error("Unexpected error:", error);
      alert("An unexpected error occurred.",server_error);
    }

  }

  const handleCancel = () => {
    navigate('/product/list'); // Redirect to product list page on cancel
  };
  return (
    <Box sx={{ maxWidth: 600, margin: 'auto', mt: 4 }}>
      <Typography variant="h4" component="h1" gutterBottom>
        Add New Product
      </Typography>
      <TextField
        margin="dense"
        name="product_Name"
        label="Product Name"
        type="text"
        fullWidth
        value={data.product_Name}
        onChange={handleInputChange}
      />
      <TextField
        margin="dense"
        name="product_Description"
        label="Product Description"
        type="text"
        fullWidth
        value={data.product_Description}
        onChange={handleInputChange}
      />
      <TextField
        margin="dense"
        name="product_Price"
        label="Product Price"
        type="number"
        fullWidth
        value={data.product_Price}
        onChange={handleInputChange}
      />
      <TextField
        margin="dense"
        name="product_Stock"
        label="Product Stock"
        type="number"
        fullWidth
        value={data.product_Stock}
        onChange={handleInputChange}
      />
      <FormControl fullWidth margin="dense">
        <InputLabel id="product_isSale-label">Is Sale?</InputLabel>
        <Select
          labelId="product_isSale-label"
          name="product_isSale"
          value={data.product_isSale}
          onChange={handleInputChange}
        >
          <MenuItem value="Yes">Yes</MenuItem>
          <MenuItem value="No">No</MenuItem>
        </Select>
      </FormControl>
      <FormControl fullWidth margin="dense">
        <InputLabel id="category_Name-label">Category</InputLabel>
        <Select
          key={data.category_Id}
          labelId="category_Name-label"
          name="category_Name"
          value={data.category_Name}
          onChange={handleInputChange}
        >
          {categories.map((category) => (
            <MenuItem key={category.category_Id} value={category.category_Name}>
              {category.category_Name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
 <div>
 <Typography variant="body1" component="label">
          Image 1
 </Typography>
  <input type="file" name="image1" onChange={handleImageChange} />
  {data.image1 && (
    <StyledImage
      src={data.image1 ? data.image1 : ''}
      alt=""
    />
  )}
</div>
<div>
<Typography variant="body1" component="label">
          Image 2
 </Typography>
  <input type="file" name="image2" onChange={handleImageChange} />
  {data.image2 && (
    <StyledImage
      src={data.image2 ? data.image2 : ''}
      alt=""
    />
  )}
</div>
<div>
<Typography variant="body1" component="label">
          Image 3
 </Typography>
  <input type="file" name="image3" onChange={handleImageChange} />
  {data.image3 && (
    <StyledImage
      src={data.image3 ? data.image3 : ''}
      alt=""
    />
  )}
</div>
<div>
<Typography variant="body1" component="label">
          Image 4
 </Typography>
  <input type="file" name="image4" onChange={handleImageChange} />
  {data.image4 && (
    <StyledImage
      src={data.image4 ? data.image4 : ''}
      alt=""
    />
  )}
</div>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
        <Button variant="contained" color="primary" onClick={handleSubmit}>
          Add
        </Button>
        <Button variant="contained" color="secondary" onClick={handleCancel}>
          Cancel
        </Button>
      </Box>
    </Box>
  );
};

export default AddProduct;
", how to resolve the below warning "warning: Each child in a list should have a unique "key" prop." line 182