I manage to delete an object from the front end using this:

const deleteItem = async (index) => {
      let removeItem = [...storeItems];
      removeItem.splice(index, 1);
      setStoreItems(removeItem);
 };

Now i’m trying to delete the object from a list queried from amplify datastore and set to a state “storeItems” like this:

const deleteItem = async (index) => {
      let removeItem = [...storeItems];
      removeItem.splice(index, 1);
      setStoreItems(removeItem);
      const todelete = await DataStore.query(StoreItem, storeItems.id);
      DataStore.delete(todelete);
  };

And i keep getting this error:

[Unhandled promise rejection: Error: Object is not an instance of a valid model]

The list is queried in a useEffect:

useEffect(() => {
    // Fetch Comments
    const fetchStoreItem = async () => { 
      const userInfo = await Auth.currentAuthenticatedUser();
      const userSub = userInfo.attributes.sub;
      const user = (await DataStore.query(User)).find(u => u.sub === userSub);
        if (!storeItems) {
            return;
        }
        const storeItem = (await DataStore.query(StoreItem))
            .filter((StoreItem) => StoreItem.userID === user.id);
            setStoreItems(storeItem)
    };
    fetchStoreItem();
  }, [storeItems]);

How can i go about doing this?