ReactJS - ayuda

tengo un problema al momento de ingresar registros en mi pagina hacia la base de datos, sucede que cuando trato de agregarlos se muestra que se envía 2 veces el mismo registro, aquí dejo el código que estoy usando

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Tables from './Tables';
import CategoryMenu from './CategoryMenu';
import Orders from './Orders';
import Menu from './Menu';
import Payment from './Payment';
import '../styles/Home.css';

function Home() {
const [selectedTable, setSelectedTable] = useState(null);
const [ordersByTable, setOrdersByTable] = useState({});
const [totalAmount, setTotalAmount] = useState(0);
const [Id, setId] = useState(null);
const [selectedItem, setSelectedItem] = useState(null);

useEffect(() => {
if (selectedTable) {
fetchOrdersForTable(selectedTable.id);
}
}, [selectedTable]);

const fetchOrdersForTable = async (table_id) => {
try {
const response = await axios.get(`http://localhost:3001/orders/${table_id}`);
setOrdersByTable((prevOrdersByTable) => ({
...prevOrdersByTable,
[table_id]: response.data,
}));
} catch (error) {
console.error('Error fetching orders:', error);
}
};

const handleConfirmPaymentFinal = async () => {
if (totalAmount > 0) {
if (window.confirm('¿Está seguro de que quiere finalizar el pago?')) {
try {
await axios.put(`http://localhost:3001/orders/${selectedTable.id}`, {
status: 'completed',
total_price: totalAmount,
});
setOrdersByTable((prevOrdersByTable) => ({
...prevOrdersByTable,
[selectedTable.id]: [],
}));
setTotalAmount(0);
} catch (error) {
console.error('Error finalizing payment:', error);
}
}
}
};

const createOrder = async (table_id, product_id, quantity) => {
const orderData = {
table_id: table_id,
product_id: product_id,
quantity: quantity,
status: 'Ocupado'
};

try {
console.log('Enviando datos al servidor:', orderData);
const response = await axios.post('http://localhost:3001/orders/create', orderData);
console.log('Respuesta del servidor:', response.data);
fetchOrdersForTable(table_id);
} catch (error) {
console.error('Error al crear la orden:', error);
}
};

const handleItemClick = async (item) => {
if (!selectedTable) return;

setOrdersByTable((prevOrdersByTable) => {
const currentOrderItems = prevOrdersByTable[selectedTable.id] || [];
const existingItemIndex = currentOrderItems.findIndex((orderItem) => orderItem.product_id === item.id);

let updatedOrderItems;
if (existingItemIndex !== -1) {
updatedOrderItems = [...currentOrderItems];
updatedOrderItems[existingItemIndex].quantity += 1;
} else {
updatedOrderItems = [...currentOrderItems, { ...item, quantity: 1 }];
}

// Get the quantity from updatedOrderItems
const quantity = updatedOrderItems[existingItemIndex]?.quantity || 1;

// Create order here
createOrder(selectedTable.id, item.id, quantity);

return {
...prevOrdersByTable,
[selectedTable.id]: updatedOrderItems,
};
});

// Update the total amount
const itemPrice = parseFloat(item.price);
setTotalAmount((prevTotalAmount) => prevTotalAmount + itemPrice);
};

const handleTableSelect = (table) => {
setSelectedTable(table);
};

const orderItems = selectedTable ? ordersByTable[selectedTable.id] || [] : [];

return (
<div className="home-container">
<div className="left-container">
<Tables setSelectedTableOld={handleTableSelect} setSelectedTableNew={handleTableSelect} />
</div>
<div className="center-container">
<div className="category-orders-container">
<CategoryMenu setSelectedId={setId} />
<Orders orderItems={orderItems} setOrderItems={(newOrderItems) => {
if (!selectedTable) return;
setOrdersByTable((prevOrdersByTable) => ({
...prevOrdersByTable,
[selectedTable.id]: newOrderItems,
}));
}} selectedTable={selectedTable} />
</div>
<Menu
category_id={Id}
onSelectItem={setSelectedItem}
onHandleItemClick={handleItemClick}
/>
</div>
<div className="right-container">
<Payment orderItems={orderItems} setOrderItems={(newOrderItems) => {
if (!selectedTable) return;
setOrdersByTable((prevOrdersByTable) => ({
...prevOrdersByTable,
[selectedTable.id]: newOrderItems,
}));
}} totalAmount={totalAmount} onConfirmPayment={handleConfirmPaymentFinal} />
</div>
</div>
);
};

export default Home;