Después de eliminar un elemento de la base de datos y actualizar la interfaz de usuario con gancho, aparece este error que dice

 "Uncaught TypeError: inventories.map is not a function".

¿Qué podría estar mal con mi código y cómo resolver este problema? Aquí está el código completo:

 const ManageInventories = () => { const [inventories, setInventories] = useInventory() const handleDeleteItem = (id) => { fetch(`http://localhost:5000/manageinventories/${id}`, { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id }) }) .then((response) => response.json()) .then((data) => { setInventories(data) }) } return ( <div className="manage-inventories-style"> <h3 className="pt-3 mb-3">Manage Inventories</h3> <Container> <Table size="lg" striped bordered hover variant="dark"> <tbody> {inventories.map((inventory) => ( <InventoryDetails key={inventory._id} inventory={inventory} handleDeleteItem={handleDeleteItem}></InventoryDetails> ))} </tbody> </Table> <div className="mt-3 pb-5"> <Link className="manage-inventories-btn d-flex align-items-center justify-content-center w-25 mx-auto" to="/additem"> Add new Item <FontAwesomeIcon className="me-2 ms-2" icon={faLongArrowAltRight}></FontAwesomeIcon> </Link> </div> </Container> </div> ) }