React JS Error: Invalid attempt to destructure non-iterable instance : <p>I have a sort filter that takes an array to populate the options. Trying to see the option <code>value</code> equal to the text within the array but I get the error within the title: </p>

<pre><code>Invalid attempt to destructure non-iterable instance
</code></pre>

<p>I need to pass the text as the value within the option tag so that when the user updates the filter, the correct text displays to the choice the user made.</p>

<p>Here is my code: </p>

<pre><code>function Sorting({by, order, rp}: SortingProps) {
    const opts = [
        ['Price (low)', 'price', 'asc'],
        ['Price (high)', 'price', 'desc'],
        ['Discount (low)', 'discount', 'asc'],
        ['Discount (high)', 'discount', 'desc'],
        ['Most popular', 'arrival', 'latest'],
        ['Most recent', 'arrival', 'latest'],
    ];

    const onChange = (i) =&gt; {
        const [text, by, order] = opts[i];
        refresh({so: {[by]: order}});
        /* GA TRACKING */
        ga('send', 'event', 'My Shop Sort By', text, 'Used');
    };

    return (
        &lt;div className={cn(shop.sorting, rp.sorting.fill &amp;&amp; shop.sortingFill)}&gt;
            &lt;Select className={shop.sortingSelect} label="Sort By" onChange={onChange} value={`${by}:${order}`}&gt;
                {opts.map(([text], i) =&gt;
                    &lt;Option key={i} value={text}&gt;{text}&lt;/Option&gt;
                )}
            &lt;/Select&gt;
        &lt;/div&gt;
    )
}
</code></pre>
