Multiple refs on react dnd

Question

How can I use multiple refs on react beautiful dnd libray

   <Droppable droppableId={column.id} isDropDisabled={Boolean(pastDays && !presentDay)}>
        {(provided) => (
          <div
            className={classNames(styles.events, {[styles.smallEvents] : events.length > 2})}
            ref={provided.innerRef}
            style={{height: '100%' }}
            {...provided.droppableProps}
          > {events.map((event, index) => {
              const dragDisabled = Boolean(pastDays && !presentDay)
              return <Draggable key={event.id} draggableId={event.id} index={index} isDragDisabled={dragDisabled}>
                {(provided) => {
                  const style = {
                    backgroundColor: 'red',
                    height: styleHeight,
                      ...provided.draggableProps.style
                  };
                
                  return (
                    <div ref={provided.innerRef, ref}
                    {...provided.dragHandleProps}
                    {...provided.draggableProps}
                    style={style}
              
                    className={classNames(styles.largeEvent,
                      { [styles.smallEvent]: events.length > 2 },
                      { [styles.hide]: index >= 7 })}> 
                    <MonthlyEvent eventImageSrc={event.eventImageSrc} channel={event.channel}  />
                      </div>
                  )
                }}
              </Draggable>
            })}
          
            {provided.placeholder}
            <div className={classNames(styles.more, { [styles.show] : events.length > 7 })}>
              <span className={styles.moreAdd}>+ {events.length - 7}</span>
            </div>
          </div>
        )}
      </Droppable> 

So I have const ref = useRef(null) and when I pass ref={provided.innerRef, ref} does not work the drag is broken