how change class component of image slider to functional component and how can custom auto slide to manual press to slide

I need to change this image slider class component to functional component

import * as React from "react";
import { StyleSheet, View, ScrollView, Dimensions, Image } from "react-native";

const DEVICE_WIDTH = Dimensions.get("window").width;

class BackgroundCarousel extends React.Component {
  scrollRef = React.createRef();
  constructor(props) {
    super(props);

    this.state = {
      selectedIndex: 0
    };
    this.scrollRef = React.createRef();
  }

  componentDidMount = () => {
    setInterval(() => {
      this.setState(
        prev => ({
          selectedIndex:
            prev.selectedIndex === this.props.images.length - 1
              ? 0
              : prev.selectedIndex + 1
        }),
        () => {
          this.scrollRef.current.scrollTo({
            animated: true,
            x: DEVICE_WIDTH * this.state.selectedIndex,
            y: 0
          });
        }
      );
    }, 3000);
  };

  setSelectedIndex = event => {
    const contentOffset = event.nativeEvent.contentOffset;
    const viewSize = event.nativeEvent.layoutMeasurement;

    // Divide the horizontal offset by the width of the view to see which page is visible
    const selectedIndex = Math.floor(contentOffset.x / viewSize.width);
    this.setState({ selectedIndex });
  };

  render() {
    const { images } = this.props;
    const { selectedIndex } = this.state;
    return (
      <View style={{ height: "100%", width: "100%" }}>
        <ScrollView
          horizontal
          pagingEnabled
          onMomentumScrollEnd={this.setSelectedIndex}
          ref={this.scrollRef}
        >
          {images.map(image => (
            <Image
              style={styles.backgroundImage}
              source={{ uri: image }}
              key={image}
            />
          ))}
        </ScrollView>
        <View style={styles.circleDiv}>
          {images.map((image, i) => (
            <View
              style={[
                styles.whiteCircle,
                { opacity: i === selectedIndex ? 0.5 : 1 }
              ]}
              key={image}
              active={i === selectedIndex}
            />
          ))}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backgroundImage: {
    height: "100%",
    width: Dimensions.get("window").width
  },
  circleDiv: {
    position: "absolute",
    bottom: 15,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: 10
  },
  whiteCircle: {
    width: 6,
    height: 6,
    borderRadius: 3,
    margin: 5,
    backgroundColor: "#fff"
  }
});

export { BackgroundCarousel };

When I change this, I have error.

import React ,{useState,useEffect} from 'react'
import { StyleSheet, View, ScrollView, Dimensions, Image } from "react-native";

const DEVICE_WIDTH = Dimensions.get("window").width;

const BackgroundCarousel =({ images })=>{
   // const isCarousel = React.useRef(null)
    const scrollRef = React.useRef();
   const[selectedIndex,setSelectedIndex]=useState(0);

//  useEffect(()=>{
//     setInterval(() => {
//         this.setState(
//           prev => ({
//             selectedIndex:
//               prev.selectedIndex === this.props.images.length - 1
//                 ? 0
//                 : prev.selectedIndex + 1
//           }),
//           () => {
//             this.scrollRef.current.scrollTo({
//               animated: true,
//               x: DEVICE_WIDTH * this.state.selectedIndex,
//               y: 0
//             });
//           }
//         );
//       }, 3000);
//  })
 

//   componentDidMount = () => {
//     setInterval(() => {
//       this.setState(
//         prev => ({
//           selectedIndex:
//             prev.selectedIndex === this.props.images.length - 1
//               ? 0
//               : prev.selectedIndex + 1
//         }),
//         () => {
//           this.scrollRef.current.scrollTo({
//             animated: true,
//             x: DEVICE_WIDTH * this.state.selectedIndex,
//             y: 0
//           });
//         }
//       );
//     }, 3000);
//   };
useEffect(()=>{
    setSelectedIndex = event => {
        const contentOffset = event.nativeEvent.contentOffset;
        const viewSize = event.nativeEvent.layoutMeasurement;
    
        // Divide the horizontal offset by the width of the view to see which page is visible
        const selectedIndex = Math.floor(contentOffset.x / viewSize.width);
        this.setState({ selectedIndex });
      };
})

 

 
    return (
      <View style={{ height: "100%", width: "100%" }}>
        <ScrollView
          horizontal
          pagingEnabled
          onMomentumScrollEnd={selectedIndex}
          ref={scrollRef}
        >
          {images.map(image => (
            <Image
              style={styles.backgroundImage}
              source={{ uri: image }}
              key={image}
            />
          ))}
        </ScrollView>
        <View style={styles.circleDiv}>
          {images.map((image, i) => (
            <View
              style={[
                styles.whiteCircle,
                { opacity: i === selectedIndex ? 0.5 : 1 }
              ]}
              key={image}
              active={i === selectedIndex}
            />
          ))}
        </View>
      </View>
    );
  
}

const styles = StyleSheet.create({
  backgroundImage: {
    height: "100%",
    width: Dimensions.get("window").width
  },
  circleDiv: {
    position: "absolute",
    bottom: 15,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: 10
  },
  whiteCircle: {
    width: 6,
    height: 6,
    borderRadius: 3,
    margin: 5,
    backgroundColor: "#fff"
  }
});

export { BackgroundCarousel };

here is homescreen

import { BackgroundCarousel } from "../components/BackgroundCarousel";

 <BackgroundCarousel images={[{uri : card.photo},{uri : card.photoo},{uri : card.photooo}]}/>

how can change to functional component and how can add press function to move image slider instead of auto slide by interval.
when press right corner , move to right and when press left corner ,move left.
please help me.