Firebase - Firestore data query callled twice two times In web version

Question

I am trying to do a query in which I get all of the documents from orders collection in firestore database. But there is a problem that all of the data is duplicated instead of getting one row for each document is duplicated. Is there any solution to that problem? I have attached the code.

import * as React from "react";
import { styled } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell, { tableCellClasses } from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { db } from "../../config/Config";
import { useEffect, useState } from "react";
import Checkbox from "@mui/material/Checkbox";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  [`&.${tableCellClasses.body}`]: {
    fontSize: 14,
  },
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  "&:nth-of-type(odd)": {
    backgroundColor: theme.palette.action.hover,
  },
  // hide last border
  "&:last-child td, &:last-child th": {
    border: 0,
  },
}));

function createData(
  id,
  DateOfInquiry,
  CompanyName,
  ContactPerson,
  ContactNo,
  ContactEmail,
  Model,
  Type,
  Capacity,
  Quantity,
  DeliveryLocation,
  WorkStartDate,
  LoadingLocation,
  UnloadingLocation,
  Comments
) {
  return {
    id,
    DateOfInquiry,
    CompanyName,
    ContactPerson,
    ContactNo,
    ContactEmail,
    Model,
    Type,
    Capacity,
    Quantity,
    DeliveryLocation,
    WorkStartDate,
    LoadingLocation,
    UnloadingLocation,
    Comments,
  };
}

const rows = [];

export default function CustomizedTables() {
  const [newProduct, setNewProduct] = useState([]);
  useEffect(() => {
    return db
      .collection("Orders")
      .get()
      .then((snapshot) => {
        const ProductData = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setNewProduct(ProductData);
      });
  }, []);
  newProduct.forEach((doc) => {
    rows.push(
      createData(
        doc.id,
        doc.DateOfInquiry,
        doc.CompanyName,
        doc.ContactPerson,
        doc.ContactNo,
        doc.ContactEmail,
        doc.Model,
        doc.Type,
        doc.Capacity,
        doc.Quantity,
        doc.DeliveryLocation,
        doc.WorkStartDate,
        doc.LoadingLocation,
        doc.UnloadingLocation,
        doc.Comments
      )
    );
  });
  const history = useHistory();
  const [ButtonClicked, setButtonClicked] = useState(false);
  const handelClick = (e) => {
    db.collection("Orders").doc(e.target.value).delete();
    setNewProduct([]);
    setButtonClicked(!ButtonClicked);
    history.push("/table");
  };
  /* useEffect(() => {
    return db
      .collection("Orders")
      .get()
      .then((snapshot) => {
        const ProductData = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setNewProduct(ProductData);
      });
  }, [ButtonClicked]); */

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 700 }} aria-label="customized table">
        <TableHead>
          <TableRow>
            <StyledTableCell align="right">Checkbox</StyledTableCell>
            <StyledTableCell align="right">S.no</StyledTableCell>
            <StyledTableCell align="right">Date of Inquiry</StyledTableCell>
            <StyledTableCell align="right">Company Name</StyledTableCell>
            <StyledTableCell align="right">Contact Person</StyledTableCell>
            <StyledTableCell align="right">Contact No</StyledTableCell>
            <StyledTableCell align="right">Contact Email</StyledTableCell>
            <StyledTableCell align="right">Model</StyledTableCell>
            <StyledTableCell align="right">Type</StyledTableCell>
            <StyledTableCell align="right">Capacity</StyledTableCell>
            <StyledTableCell align="right">Quantity</StyledTableCell>
            <StyledTableCell align="right">Delivery Location</StyledTableCell>
            <StyledTableCell align="right">Work Start Date</StyledTableCell>
            <StyledTableCell align="right">Loading Location</StyledTableCell>
            <StyledTableCell align="right">Unloadig Location</StyledTableCell>
            <StyledTableCell align="right">Comments</StyledTableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <StyledTableRow key={row.id} onClick={handelClick}>
              <TableCell padding="checkbox">
                <Checkbox
                  color="primary"
                  value={row.id}
                  onChange={handelClick}
                />
              </TableCell>
              <StyledTableCell component="th" scope="row">
                {row.id}
              </StyledTableCell>
              <StyledTableCell align="right">
                {row.DateOfInquiry}
              </StyledTableCell>
              <StyledTableCell align="right">{row.CompanyName}</StyledTableCell>
              <StyledTableCell align="right">
                {row.ContactPerson}
              </StyledTableCell>
              <StyledTableCell align="right">{row.ContactNo}</StyledTableCell>
              <StyledTableCell align="right">
                {row.ContactEmail}
              </StyledTableCell>
              <StyledTableCell align="right">{row.Model}</StyledTableCell>
              <StyledTableCell align="right">{row.Type}</StyledTableCell>
              <StyledTableCell align="right">{row.Capacity}</StyledTableCell>
              <StyledTableCell align="right">{row.Quantity}</StyledTableCell>
              <StyledTableCell align="right">
                {row.DeliveryLocation}
              </StyledTableCell>
              <StyledTableCell align="right">
                {row.WorkStartDate}
              </StyledTableCell>
              <StyledTableCell align="right">
                {row.LoadingLocation}
              </StyledTableCell>
              <StyledTableCell align="right">
                {row.UnloadingLocation}
              </StyledTableCell>
              <StyledTableCell align="right">{row.Comments}</StyledTableCell>
            </StyledTableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

This is the image of the table.