I need to upload particular file upload but it upload all array of object

[vel-kathir]

import React, { useCallback, useState, useEffect } from "react";
import { Grid, IconButton } from "@mui/material";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import Typography from "@mui/material/Typography";
import DeleteIcon from "@mui/icons-material/Delete";
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
import Pdf from "../../assets/images/pdf.svg";
import { useDropzone } from "react-dropzone";
import data from "../Jsons/Upload2.json";

const FileUploadUI = (props) => {
const { id } = props;
console.log(props);
const [uploadedFiles, setUploadedFiles] = useState([]);

const onDrop = useCallback(
(acceptedFiles) => handleDrop(acceptedFiles, id),
[id]
);

const handleDrop = useCallback((acceptedFiles, id) => {
const pdfFiles = acceptedFiles.filter(
(file) =>
file.type === "application/pdf" ||
file.type ===
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
);
console.log(id, "iopp");
if (pdfFiles?.length > 0) {
const updatedAccounts = data.map((account) => {
if (account.id === "1") {
const existingHdfcFiles = account.hdfc || [];
const newHdfcFiles = pdfFiles.map((pdfFile, index) => ({
path: ${pdfFile.name} (${index + 1}).pdf,
}));
return { ...account, hdfc: [...existingHdfcFiles, ...newHdfcFiles] };
}
return account;
});
setUploadedFiles(updatedAccounts);
} else {
console.log("Please upload a PDF file.");
}
}, []);

const { getRootProps, getInputProps } = useDropzone({
onDrop,
accept: ".pdf, .docx",
maxSize: 2 * 1024 * 1024,
});
console.log(uploadedFiles, "ppp");
return (

<Grid sx={{ p: "20px" }}>
{data.map((item) => (
<Grid
container
alignItems="center"
display={"flex"}
spacing={2}
marginTop={"19px"}
maxWidth={"max-content"}
>
<Grid
style={{
display: "flex",
gap: "10px",
}}
>

<Typography style={{ fontSize: "14px", marginTop: "15px" }}>
{item.num}


<Grid item height={"auto"}>
<Typography
sx={{
border: "solid 1px #DBDBDC",
p: 2,
minWidth: "300px",
borderRadius: 1,
background: "#f2f2f2",
fontSize: "14px",
}}
>
{item.content}


<Grid item height={"auto"}>
<Grid display={"flex"}>
<div {...getRootProps(id)} style={dropzoneStyles}>
<input {...getInputProps()} />

<Typography sx={{ fontSize: 13, color: "#A6A5A5" }}>
Upload

              {uploadedFiles.length > 0 && (
                <div>
                  {uploadedFiles.map((item1, index1) => {
                    if (item1.hdfc)
                      return item1.hdfc
                        .reduce((rows, file, index) => {
                          if (index % 2 === 0) {
                            rows.push([]);
                          }
                          rows[rows.length - 1].push(file);
                          return rows;
                        }, [])
                        .map((row, rowIndex) => {
                          return (
                            <Grid display={"flex"} marginBottom={"4px"}>
                              {row.map((file, index) => {
                                return (
                                  <div
                                    key={index}
                                    style={{ marginRight: "10px" }}
                                  >
                                    <Grid display={"flex"}>
                                      <Grid px={1} sx={2}>
                                        <Typography
                                          sx={{
                                            border: "solid 1px #DBDBDC",
                                            height: 30,
                                            borderRadius: 1,
                                            fontWeight: "bold",
                                            py: "11.5px",
                                            width: 180,
                                            display: "flex",
                                            justifyContent: "space-between",
                                            alignItems: "center",
                                            fontSize: 14,
                                          }}
                                        >
                                          <Grid
                                            sx={{
                                              ml: 1,
                                              width: 32,
                                              borderRadius: 1,
                                              px: 0.7,
                                              py: 0.6,
                                              color: "#F2F4F8",
                                              border: 1,
                                            }}
                                          >
                                            <img src={Pdf} alt="Icon" />
                                          </Grid>
                                          <Typography
                                            width={"700px"}
                                            ml={1}
                                            sx={{
                                              fontSize: 12,
                                              display: "flex",
                                              alignItems: "center",
                                              whiteSpace: "nowrap",
                                            }}
                                          >
                                            {file.path.length > 8
                                              ? `${file.path.slice(0, 8)}..`
                                              : file.path}
                                          </Typography>
                                          <Typography
                                            sx={{
                                              fontSize: 9,
                                              color: "#A6A5A5",
                                            }}
                                            style={{ whiteSpace: "nowrap" }}
                                          >
                                            {`(${(file.size / 1024).toFixed(
                                              2
                                            )} KB)`}
                                          </Typography>
                                          <IconButton>
                                            <ArrowDownwardIcon
                                              sx={{ maxWidth: 14 }}
                                              color="grey"
                                            />
                                          </IconButton>
                                        </Typography>
                                      </Grid>
                                      <IconButton
                                        sx={{
                                          border: "solid 1px #DBDBDC",
                                          height: 54,
                                          color: "grey",
                                          borderRadius: 1,
                                        }}
                                      >
                                        <DeleteIcon color="grey" />
                                      </IconButton>
                                    </Grid>
                                  </div>
                                );
                              })}
                            </Grid>
                          );
                        });
                  })}
                </div>
              )}
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    ))}
  </Grid>
</div>

);
};

const dropzoneStyles = {
border: "1.5px dashed",
borderRadius: "6px",
padding: "1px",
textAlign: "center",
cursor: "pointer",
backgroundColor: "#f2f2f2",
width: "80px",
height: "50px",
color: "grey",
};

const iconStyles = {
fontSize: "1.5rem",
color: "#A6A5A5",
};

export default FileUploadUI;

data=[
{
"id":"1",
"num":"1)",
"content":"HDFC Current Account"
},
{
"id":"2",
"num":"2)",
"content":"Citi Bank Savings Account"
},
{
"id":"3",
"num":"3)",
"content":"Motilal Oswal Equity Account"
},
{
"id":"4",
"num":"4)",
"content":"Zerodha Equity Account"
},
{
"id":"5",
"num":"5)",
"content":"Axis Savings Account"
}
]

If I click a dropdown input the file is upload and need to set in the data

for example
data=[
{
"id":"1",
"num":"1)",
"content":"HDFC Current Account",
"bank":[{"0":file-1 format},{"1":file-2 format}]
},
{
"id":"2",
"num":"2)",
"content":"Citi Bank Savings Account"
},
{
"id":"3",
"num":"3)",
"content":"Motilal Oswal Equity Account"
},
{
"id":"4",
"num":"4)",
"content":"Zerodha Equity Account"
},
{
"id":"5",
"num":"5)",
"content":"Axis Savings Account",
"bank":[{"0":file-1 format},{"1":file-2 format}]
}
]