How do I destroy() a VirtualSelect menu?

[kjmitch]

I cannot figure out how to use the destroy() function. The example in the documentation is pretty minimal but I figured it should be straightforward to use. But no matter what I try, I get some variation of Uncaught (in promise) TypeError: sampleMenu.destroy is not a function in the browser console. I've tried different ways to access the Virtual Select part of the element to use the actual destroy() method, but I've run out of ideas that aren't stabs in the dark.

I'm trying to reinitialize an existing menu with a larger set of options, and simply setting the options to a new set doesn't work; the setOptions() method doesn't tell the drop-down menu to refresh correctly and the scrollable length doesn't expand from the previous smaller size. So I'm now trying to destroy and reinitialize the menu instead, but I cannot access the destroy() function. What am I missing?

[yiannakasgeorge]

Here you go:

All my virtualSelect components have the classes i'm query selecting below. Then and in order to safeguard, i am checking whether the domElement is an instance of virtualSelect (checking for undefined type). In such case i have a return otherwise i am using the destroy function.

    let selects = document.querySelectorAll('.native-select.virtual-select');

    selects.forEach((select) => {
     
        if (typeof(select.virtualSelect) == 'undefined') {
            return;
        }
        select.virtualSelect.destroy();
    });