Smooth Picker scrollIndex showing error while scrolling - react-native

Question

Tried example of "react-native-smooth-picker#1.1.3" to implement smooth scroll when on scrolling found handleChange method throws error which is,
TypeError: refPicker.current.scrollToIndex is not a function. (In 'refPicker.current.scrollToIndex({animated: false,index: index,viewOffset: -30})','refPicker.current.scrollToIndex' is undefined).
Also when scrolling values not properly selecting and set in to useState by index. Please suggest what is the issue here and how to fix it.
Here is the smooth picker code,
...
import SmoothPicker from "react-native-smooth-picker";
const opacities = {
0: 1,
1: 1,
2: 0.6,
3: 0.3,
4: 0.1,
};
const sizeText = {
0: 20,
1: 15,
2: 10,
};
const ItemToRender = ({item, index}, indexSelected, vertical) => {
const selected = index === indexSelected;
const gap = Math.abs(index - indexSelected);
let opacity = opacities[gap];
if (gap > 3) {
opacity = opacities[4];
}
let fontSize = sizeText[gap];
if (gap > 1) {
fontSize = sizeText[2];
}
return ;
};
export default function SmoothPickerScreen({ navigation }) {
const [ selected, setSelected ] = React.useState(1);
const [value, setValue] = React.useState(null);
const [dataRows, setdataRows] = React.useState([]);
const data = [{name: 'A1',id:1},{name: 'A2',id:2}, {name: 'A2',id:3}, {name: 'A4',id:4}, {name: 'A5',id:5}, {name: 'A6',id:6}, {name: 'A7',id:7}, {name: 'A8',id:8}, {name: 'A9',id:9}, {name: 'A10',id:10}];
React.useEffect(() => {
(async () => {
setdataRows(data);
})();
}, []);
function handleChange(index) {
// console.log(index, refPicker);
setSelected(index);
refPicker.current.scrollToIndex({
animated: false,
index: index,
viewOffset: -30,
});
}
return (
{}}
keyExtractor={(_, index) => index.toString()}
showsVerticalScrollIndicator={false}
data={dataRows.map((o)=> {
// let obj;
return o.name
})}
// data={Array.from({ length: 16 }, (_, i) => i)}
scrollAnimation
onSelected={({ item, index }) => {
let find = dataRows.find(o => o.name === item)
// console.log('in scroll',item,index, find)
setValue(find.id)
handleChange(index)
}}
renderItem={option => ItemToRender(option, selected, true)}
magnet
/>
)
}