Dynamic smart select rendering

Questions
1

I have huge amounts of datas inside SmartSelects and it makes the application slow if I have 3-4 SmartSelects in the same page. I would like to render the select/options after clicking on the smartSelect, is there a way?

This is what I have right now:

<ListItem
label={label}
value={values[label].value}
title={label}
smartSelect
smartSelectParams={{
	virtualList: true,
	searchbar: true,
	openIn: "popup",
	popupTabletFullscreen: true,
	popupPush: true,
	closeOnSelect: true
}}

<select
	multiple
	defaultValue={
		values[label].value !== null
			? values[label].value
			: lista[0].value
	}
	name="SelectBox"
>
	{list.map((obj) => (
		<option
			key={this.$f7.utils.id("xxxx-xxxx-xxxx-xxxx-xxxx")}
			value={obj.value}
		>
			{obj.key}
		</option>
	))}
</select>
2

Clicking on the selection, you can create the list and destroy the list after the selection is made.

function createSmartSelect(component){
  const smartSelectInstance = component.smartSelectInstance();
  smartSelectInstance.create(/*parameters*/);
}

function destroySmartSelect(component){
  const smartSelectInstance = component.smartSelectInstance();
  smartSelectInstance.destroy(/*parameters*/);
}