How to dynamically add items in a react grid with varying sizes to stack next to each other

[saurav-sh]

i'm looking for a solution when i add a new card in the grid it gets added to the first available space if not it adds down

We are currently adding it something like this where cars always gets added to the bottom but there is always a free space on the right

    addCards: {
      prepare: (payload: CardConfig[]) => {
        const layout: CardLayout[] = payload.map((card) => {
          const id = nanoid();
          const { cardId } = card;

          return {
            cardId,
            h: card.h,
            i: `${cardId}_${id}`,
            id,
            w: card.w,
            x: 0,
            y: Infinity,
          };
        });

        return { payload: layout };
      },
      reducer: (state, { payload }: PayloadAction<CardLayout[]>) => {
        const newDesktopLayout = [...state.allLayouts.desktop, ...payload];

        state.allLayouts.desktop = newDesktopLayout;
        state.newlyAddedCards = [...payload];
      },
    },