Cannot drag after the first set but can after the second one

[Anulo2]

Hey there, I'm working with the drag and drop feature but I'm having some issues where I can only drag the value after I set it 2 times.

The code looks something like this:

function Admin({roomActions, plugins, room}){  
  useEffect(() => {
    if ( room && (!room.plugins || room.plugins.length === 0)) {
      const pluginIds = plugins.map((plugin) => plugin.id);    
      roomActions.updateValue(room.id, "plugins", pluginIds);
    }
  }, [room.plugins, plugins, room.id, roomActions]);


  useEffect(() => {
	  if (plugins && room.plugins && room.plugins.length > 0) {
      const pluginIds = plugins.map((plugin) => plugin.id);

		  // Preserve the current order and add missing plugins
      const updatedPlugins = [...room.plugins];

		  // Add any new plugins not in the current list
      pluginIds.forEach((id) => {
        if (!updatedPlugins.includes(id)) {
          updatedPlugins.push(id);
        }
      });

		  // Remove plugins no longer in the system
      const finalPlugins = updatedPlugins.filter((id) => pluginIds.includes(id));


		  // Update room plugins only if there are changes
      if (JSON.stringify(finalPlugins) !== JSON.stringify(room.plugins)) {
        roomActions.updateValue(room.id, "plugins", finalPlugins);
      }

		}
  }, [plugins, room.id, roomActions]);

  const [parent, pluginOrder, setPluginOrder] = useDragAndDrop([],
    {   
      plugins: [animations()] 
    }
  );

  useEffect(() => {
    if (room.plugins) {
      setPluginOrder(room.plugins);
    }
  }, [room.plugins]);

  const saveReorderHandler = () => {
    roomActions.updateValue(room.id, "plugins", pluginOrder);
  };


  return (
    <>
      ...
      {pluginOrder  && pluginOrder.length > 0 && (
        <ul ref={parent} className="  space-y-2 ">
          { pluginOrder.map((pluginId) => {
            const pluginName = (() => { 
              ....
            })();
            if (!pluginName) return null;                 
              return (
                <li
                  key={pluginId}
                  data-label={pluginId}
                  className=" cursor-pointer flex gap-2 hover:bg-gray-600 bg-gray-700 p-2 rounded items-center"
                >
                  <Bars3Icon className="w-6 h-6" />
                  {pluginName}
                </li>
              )
          })}
        </div>
      )}
      ...
    </>
  )
}

The elements become draggable only after I save them, not on the first load. The order is laoded correctly from the store, the save works correctly and adding and removing works correctly. It's just the first drag that is broken.

I'm using version 0.2.5