How to pass GridList style props to GridListTile wrapped in other component

Question

I'm having trouble with passing GridList style props that should be injected to GridListTile in map function. From what I have read and browsed so far, I found that it might be related to Composition in Material-Ui.

Here is my working code without wrapping it in a Draggable component from react-beautiful-dnd.

<GridList
    cellHeight={120}
    className={classes.gridList}
    cols={7}
    spacing={10}
    {...providedDroppable.droppableProps}
    ref={providedDroppable.innerRef}
>
    {data.items.map((item, index) => {
        return (
            <GridListTile key={item.key} cols={1}>
                <div className={classes.slot}></div>
                <GridListTileBar
                    title={item.name}
                    classes={{
                        root: classes.slotTitle,
                    }}
                />
            </GridListTile>
        );
    })}
    {providedDroppable.placeholder}
</GridList>

Here is the not working code with wrapping it in Draggable component

                            <GridList
                                cellHeight={120}
                                className={classes.gridList}
                                cols={7}
                                spacing={10}
                                {...providedDroppable.droppableProps}
                                ref={providedDroppable.innerRef}
                            >
                                {data.items.map((item, index) => {
                                    return (
                                        <Draggable
                                            key={item.key}
                                            draggableId={item.key}
                                            index={index}
                                        >
                                            {(providedDraggable) => {
                                                return (
                                                    <GridListTile
                                                        key={item.key}
                                                        cols={1}
                                                        ref={providedDraggable.innerRef}
                                                        {...providedDraggable.draggableProps}
                                                        {...providedDraggable.dragHandleProps}
                                                    >
                                                        <div className={classes.slot}></div>
                                                        <GridListTileBar
                                                            title={item.name}
                                                            classes={{
                                                                root: classes.slotTitle,
                                                            }}
                                                        />
                                                    </GridListTile>
                                                );
                                            }}
                                        </Draggable>
                                    );
                                })}
                                {providedDroppable.placeholder}
                            </GridList>