Picker Scroll to select value bug

Why I can’t scroll to select a value in my Sheet picker?

Here’s the code:
// Accent color
function color() {

}
var colors = [
{ name: ‘Default’, value: ‘#3E84F6’ },
{ name: ‘Red’, value: ‘#FF6347’ },
{ name: ‘Green’, value: ‘#32CD32’ },
{ name: ‘Orange’, value: ‘orange’ },
{ name: ‘Pink’, value: ‘pink’ },
{ name: ‘Grey’, value: ‘grey’ }
];

var colorButton = document.querySelector(‘.open-color-picker’);
var colorPicker = null;

function initializeColorPicker() {

colorPicker = app.picker.create({
openIn: ‘auto’,
inputEl: colorButton,
rotateEffect: true,
sheetPush: true,
sheetSwipeToClose: true,
cols: [
{
textAlign: ‘center’,
values: colors.map(function (color) {
return color.name;
}),
displayValues: colors.map(function (color) {
return color.name;
})
}
],
on: {
change: function (picker, values) {
var selectedColor = colors.find(function (color) {
return color.name === values[0];
});

    if (selectedColor) {
      document.documentElement.style.setProperty('--f7-ios-primary', selectedColor.value);
      document.documentElement.style.setProperty('--f7-ios-primary-shade', selectedColor.value);
      document.documentElement.style.setProperty('--f7-ios-primary-tint', selectedColor.value);

      localStorage.setItem('colorPreference', selectedColor.value);
    }
  }
}

});

var savedColor = localStorage.getItem(‘colorPreference’);
if (savedColor) {
document.documentElement.style.setProperty(‘–f7-ios-primary’, savedColor);
document.documentElement.style.setProperty(‘–f7-ios-primary-shade’, savedColor);
document.documentElement.style.setProperty(‘–f7-ios-primary-tint’, savedColor);
colorPicker.setValue([colors.find(function (color) { return color.value === savedColor; }).name]);
}
}

function color() {
if (colorPicker === null) {
initializeColorPicker();
} else {
colorPicker.open();
}
}

colorButton.addEventListener(‘click’, color);

initializeColorPicker();