Storybook Select knobs with long list is crashing

[sreeg123]

Select knob with long list options when an option is selected then the page is crashing, will need to reload.

To Reproduce

<Meta
title="Foundations/Icons/Iconography"
decorators={[
withKnobs({
escapeHTML: false
}),
moduleMetadata({
imports: [CommonModule, IconModule]
})
]}
parameters={{
a11y: { ...a11yConfig, element: 'icon' }
}}
/>

export const iconsList = [
{
label: 'vanguardLargeLogo white',
name: 'vanguardLargeLogo',
class: 'vanguardLogoWhite'
}, ........................
]

<Canvas mdxSource={<icon [icon]="iconData"></icon>}>

{{
template: <icon [icon]="iconData"></icon>,
props: {
iconData: select('Icon', iconsList, iconsList[0])
}
}}

System
"@storybook/addon-knobs": "~6.2.3",
Angular - v11.2

Additional context
This code is crashing only after upgrading to Angular 11 from angular 9 and storybook 6.2

[shilman]

FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs, which are slated for deprecation.

• Controls documentation
• Migration instructions

Please upgrade and try out controls today!

[sreeg123]

Tried controls, i can see the select control but can not tie the control value to template, Can you please let me know what i am missing, Thank You!

<Meta
title="Foundations/Icons/SVG"
decorators={[
moduleMetadata({
imports: [CommonModule, SvgModule]
})
]}
parameters={{
a11y: { ...a11yConfig, element: 'svg' }
}}
argTypes={{
icon: {
control: {
type: 'select',
options: ['vuiInternalCallout', 'vuiArrow' ]
}
}
}}
/>

export const svgTemplate = (args, { argTypes}) => ({
template: <svg [name]="icon"></svg>,
props: Object.keys(argTypes)
});

<Canvas
mdxSource={<svg [name]="icon"></svg>}

<Story name="SVG" height="250px" args={{icon : 'vuiArrow'}}>
{svgTemplate .bind({})}