Cannot read property 'setDraggables' of undefined about react-smooth-dnd HOT 4 OPEN

const handleContainerRender = React.useCallback(
    (ref: React.Ref<HTMLDivElement>) => (
      <div style={{ width: '100%', height: 'calc(100% - 29px)' }} ref={ref}>
        {renderItems.map(renderItem)}
      </div>
    ),
    [renderItem, renderItems]
  );

<Container :options="someOptionsHere">
    <Draggable v-for="item in displayList" :key="item.id>
        <bunch-of-html-thats-not-relevant />
    </Draggable>
</Container>

const displayList = computed(() => {

const searchValue = searchData.value.value; 
const exercises = programsStore.exercises; 
const flows = programsStore.flows; 

if (!exercises) return [{  
    title: 'loading',
    subtitle: 'loading',
    interactions: false,
    id: 0,
}];


const exercisesList: Array<CardItemData> = [];
for (const exercise of exercises) {
    if (searchValue) {
        if (!checkSearchValue(searchValue, new SearchObj(
            exercise.title, 
            exercise.alt_title? exercise.alt_title : exercise.description? exercise.description : null, 
            exercise.level))
        ) continue; // if the search value is not found in the exercise, skip to the next exercise
    }

    const exerciseItem: CardItemData = new CardItemData(
        exercise.id, 
        exercise.title, 
        exercise.alt_title? exercise.alt_title : exercise.level? `Level ${exercise.level}` : 'No Level Assigned', 
        false,
        exercise.demo_media? true : false,
        exercise.demo_media? exercise.demo_media.url : null,
        null, 
        null,  
        'exercise', 
        exercise.id,
    );

    const variations = getExerciseVariationsList(exercise);
    if (variations.length > 0) {
        exerciseItem.interactions = true;
        exerciseItem.listTitle = 'Exercise Variations';
        exerciseItem.list = variations;
    }

    exercisesList.push(exerciseItem);
}

const flowsList: Array<CardItemData> = [];
for (const flow of flows) {
    if (searchValue) {
        if (!checkSearchValue(searchValue, new SearchObj(
            flow.title, 
            flow.alt_title? flow.alt_title : flow.description? flow.description : null, 
            flow.level))
        ) continue; // if the search value is not found in the exercise, skip to the next exercise
    }
    const flowItem: CardItemData = new CardItemData(
        flow.id, 
        flow.title, 
        flow.alt_title, 
        false, 
        flow.demo_media? true : false,
        flow.demo_media? flow.demo_media.url : null,

        null, 
        null, 
        'flow', 
        flow.id
    );

    const flowExercises = getFlowExerciseList(flow.id); // get the exercises in the flow.
    if (flowExercises.length > 0) { // if there are exercises in the flow, add them to the list (this is the expanded list), realistically should never be empty
        const firstExercise = flowExercises[0];
        const firstExerciseData = programsStore.flowExercises.find((flowExercise) => flowExercise.id === firstExercise.id);

        if (firstExerciseData) {
            if (firstExerciseData.exercise.demo_media) {
                flowItem.image = true;
                flowItem.image_url = firstExerciseData.exercise.demo_media.url;
            }
        }

        flowItem.interactions = true;
        flowItem.listTitle = 'Exercises in this flow';
        flowItem.list = flowExercises;
    }

    flowsList.push(flowItem);
}

if (activeTab.value.category === 'Search') {
    const list = [...exercisesList, ...flowsList];
    return list;
} else if (activeTab.value.category === 'Exercises') {
    return exercisesList;
} else if (activeTab.value.category === 'Flows') {
    return flowsList;
}

function checkSearchValue(searchValue: string, exercise: SearchObj ) {
    if (exercise.title.toLowerCase().includes(searchValue.toLowerCase())) {
        return true;
    } else if (exercise.alt_title) {
        if (exercise.alt_title.toLowerCase().includes(searchValue.toLowerCase())) {
            return true;
        }
    } else if (exercise.level) {
        if (exercise.level.toString().includes(searchValue.toLowerCase())) {
            return true;
        }
    } else {
        return false;
    }
}