Essayer de créer une table / liste déplaçable et cela me donne une erreur en disant "provided.innerRef n'a pas été fourni avec un HTMLElement."

J'essaie de créer une liste déplaçable en utilisant Material UI et react-beautiful-dnd. J'ai suivi le tutoriel sur leur page et créé ceci -

Error: Invariant failed: 
    provided.innerRef has not been provided with a HTMLElement.

    You can find a guide on using the innerRef callback functions at:
    https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md

Cela me donne une erreur

function DraggableList(props) {
  const { classes, tableHeaders, tasksList } = props;
  return (
    <div>
      <Droppable droppableId="id">
       {(provided) => (
         <div ref={provided.innnerRef} {...provided.droppableProps}>  
           {tasksList && tasksList.slice(0,5).map((row, index) => (
              <Draggable draggableId={row.id} index={index}>
                {(provided)=> (
                  <div index={index} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> 
                    <Paper className={classes.root} key={row.id}>
                      <Grid container xs={12} className={classes.topContainer}>
                        <Grid item xs={2}>
                          <IconButton><DragIndicatorIcon className={classes.dragIcon}/></IconButton> </Grid>
                        <Grid item xs={10}>
                          <Typography className={classes.activity} variant="body2">{row.name}</Typography>
                        </Grid>
                      </Grid>
                    </Paper>
                   </div>
                )}
              </Draggable>
            ))}
          </div>
        )}
      </Droppable>
    </div>
  );
}

bien que je mette innerRef sur un ' div '. Quelle est l'erreur ici