Bug in library

[nijatmursali]

I'm using this library for one of our React projects, it works fine, but there is a bug with it.

I have a SidebarSizeModal React component, which acts like a modal to add/edit/remove and move the sizes (like S, M, L, XL). I have data.sizes array in my ContextAPI. So, in this component, I have:

  const data = useData();
  const [tempSize, setTempSize] = useState([]);
  const [loading, setLoading] = useState(false);

and I'm just initiating this tempSize array

  useEffect(() => {
    setTempSize(data.sizes);
  }, [data.sizes]);

The issue happens when I try to remove the size, which I do with id.

  const onRemoveMeasurement = async (title, id) => {
    if (title === "M") {
      // If it's "M", you may want to handle this differently
      console.log("You can't remove the 'M' size.");
    } else {
      // Filter out the size to remove from tempSize
      const updatedTempSize = tempSize.filter((item) => item.id !== id);
      setTempSize(updatedTempSize);

      // Update the data.sizes and perform any other required actions
      const updatedDataSizes = data.sizes.filter((item) => item.id !== id);
      data.setSizes(updatedDataSizes);
    }
  };

Here, if I try to remove S, L is getting removed and etc.

My List is like following:

<List
              values={tempSize}
              onChange={({ oldIndex, newIndex }) => {
                setTempSize([]);
                setTimeout(() => {
                  setTempSize(arrayMove(tempSize, oldIndex, newIndex));
                }, 1);
              }}
              renderList={({ children, props }) => <ul {...props}>{children}</ul>}
              renderItem={({ value, index, props }) => (
                <li {...props}>
                 <input
                    type="text"
                    defaultValue={!value.title ? value.size : value.title}
                    disabled={value.title === "M" || value.size === "M"}
                    onKeyUp={(e) => onChangeName(value.id, e.target.value)}
                  />
                  <button
                    type="button"
                    className={styles.remove_btn}
                    onClick={() => onRemoveMeasurement(value.title, value.id)}
                  ></button>
                </li>
              )}
            />

I debugged a bit the onRemoveMeasurement code, which gives following results:

      console.log(tempSize); // gives S, M, L, XL
      const updatedTempSize = tempSize.filter((item) => item.id !== id);
      setTempSize(updatedTempSize);
      console.log(updatedTempSize); // gives M, L, XL

the result is correct, but on the page, it shows S, M, L, where it shows XL is removed instead of S and S gets disabled for some reason.