React beautiful dnd first column of two not working properly - unable to find draggable with id

Question

I've implemented react beautiful dnd into my app, however I've found that dragging items that are initialised in the first column mostly doesn't work (it sometimes works if you keep refreshing). I tried swapping my columns around and it appears the first one rendered has the problem rather than one column having an issue.

I'm not sure what is causing it, the error I receive in the console from the library is: Unable to find draggable with id: 6112804b8127dd10b00138d8.

The id however matches the ids in my lists and the HTML viewed in inspect element.

Here's the minimum code, I've not included the functions for filtering search, reordering, move and onDragEnd (isn't being fired as it doesn't find the draggable)

    const id2List = {
           'available':  availableSections,
           'selected': selectedSections
        };
    const getList = id => id2List[id];
    
    return (
            <Container>
                <Widget title={template.name} paddingStyle="10px" buttonRight={<SaveButton  handleSubmit={handleSubmit} loading={loading}/>}> 
                    <DragDropContext onDragEnd={onDragEnd}>
                        <Row>                      
    
                            <Col >
                                Available Sections
    
                                <Form.Control onChange={(e) => setSearchTextAvailable(e.target.value)} className="mb-3"  type="text" placeholder="Search..." />
                       
    
                                 <Droppable key="available" droppableId="available">      
    
                                    {provided => (
                                        <div ref={provided.innerRef}  {...provided.droppableProps}>
    
                                        
                                        {Object.keys(visibleAvailableSections).map((section) => {return <SectionCard key ={visibleAvailableSections[section]._id} section={ visibleAvailableSections[section] } index={parseInt(availableSections.indexOf(visibleAvailableSections[section])) } /> })}
    
                                    
                                        {provided.placeholder}
                                        </div>
                                    )}
    
                                </Droppable>
    
                            </Col>
    
    
                            <Col>                        
                                Selected Sections
    
                                <Form.Control onChange={(e) => setSearchTextSelected(e.target.value)} className="mb-3"  type="text" placeholder="Search..." />
                       
                             
                                <Droppable key="selected" droppableId="selected">      
                                    {provided => (
                                        <div ref={provided.innerRef}  {...provided.droppableProps}>
    
                                        
                                        {Object.keys(visibleSelectedSections).map((section) => {return <SectionCard key ={visibleSelectedSections[section]._id.toString()} section={ visibleSelectedSections[section] } index={parseInt(selectedSections.indexOf(visibleSelectedSections[section])) } /> })}
    
                                    
                                        {provided.placeholder}
                                        </div>
                                    )}
                                </Droppable>
    
                            </Col>
                           
                        </Row>          
                    </DragDropContext>
                </Widget>
    
            </Container>
        )
    
    
    
    
    
    const SectionCard = ({section, index}) => {
    
        return (
        
            <Draggable draggableId={section._id.toString()} key={section._id}  index={index}>
            {provided => (
                 <Card key={"card-" + section._id.toString()} style={{ width: '18rem' }}
                 ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}              
            >
                <Card.Body>
                    <Card.Title>{ section.name }</Card.Title>
                    <Card.Subtitle className="text-muted">{ section.description }</Card.Subtitle>
                    
                    { section.tags.map((tag) => {
                        return <Badge pill bg={"secondary"} key={section._id + tag} >{ tag }</Badge>
                })}  
                        
                </Card.Body>
            </Card>    
              
            )}
            </Draggable>       
        );
    }