slider not updating the slides number when component rerender in React Native expo

[demosofa]

I followed this offical example: React Native and this doc keen-slider/native. I tried to make my slider component with dynamic slides number since the data from slides only avalible after second rerendering of function App() so the first render is just empty array. Here is my slider component

import { useKeenSliderNative } from "keen-slider/react-native";
import { useEffect } from "react";
import { Button, Image, View } from "react-native";

export default function Slider({ arrImage, ...props }) {
  const slider = useKeenSliderNative({
    slides: { perView: 1, number: arrImage.length },
  });
  useEffect(() => {
    slider.update({ slides: { number: arrImage.length } });
  }, [arrImage]);
  return (
    <View {...props}>
      <Button
        onPress={() => {
          let currentIdx = slider.track.details.abs;
          if (currentIdx - 1 >= 0) slider.moveToIdx(currentIdx - 1);
        }}
        style={styles.button}
        title="Prev"
      />
      <View style={styles.slider} {...slider.containerProps}>
        {arrImage.map((uri, index) => {
          return (
            <View key={uri} {...slider.slidesProps[index]}>
              <Image source={{ uri }} style={styles.slide} />
            </View>
          );
        })}
      </View>
      <Button
        onPress={() => {
          let currentIdx = slider.track.details.abs;
          if (currentIdx + 1 <= arrImage.length)
            slider.moveToIdx(currentIdx + 1);
        }}
        style={styles.button}
        title="Next"
      />
    </View>
  );
}

const styles = {
  button: {
    flex: 1,
    width: 50,
    height: 50,
  },
  slider: {
    flex: 4,
    height: "80%",
    backgroundColor: "#fff",
    overflow: "hidden",
  },
  slide: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "black",
  },
  text: {
    color: "white",
    fontSize: 30,
  },
};

[rodolforamos]

Same here!!