Creating a list of items such that on pressing it navigates to a screen. The List can have Switch Icon which required different space management

Question

I have a PageNavigator Component, using that data array I want to iterate overit to create a group list of componet that has arrow button and a text. But my requirement is this, there is a switch button in betweeen, passing title and component name manually in PageNavigator will make the code unmaintainable . Can anybody suggest me a better way to do it because additional of switch mean mangint state for swenter image description hereitch component for on and off.

// Attached code 

let data = [
  {
    title: "Notification Preferance",
    componentName: "NotificationPreferanceScreen",
  },
  {
    title: "Class Calendar",
    componentName: "ClassCalendarScreen",
  },
  {
    title: "Address",
    componentName: "AddressScreen",
  },
  {
    title: "Payment",
    componentName: "PaymentScreen",
  },
  {
    title: "Logged in Devices",
    componentName: "LoggedInDevicesScreen",
  },
  {
    title: "Logout",
    componentName: "LogoutScreen",
  },
];

import { useNavigation } from "@react-navigation/native";
import React from "react";
import { View, StyleSheet, Pressable, Text } from "react-native";
import ChevronRightIcon from "../icons/ChevronRightIcon";

const PageNavigator = ({
  title,
  componentName,
  disabled = false
}) => {
  const navigation = useNavigation();

  const handlePress = () => {
    navigation.navigate(componentName);
  };
  return (
    <Pressable style={styles.mainContainer} onPress={} disabled ={disabled}>
      <View>
        <View style={styles.textContainer}>
          <Text style={styles.title}>{title}</Text>
          <ChevronRightIcon style={styles.icon} />
        </View>
        {showBorder && (
          <View
            style={{
              height: 1,
              width: "100%",
              backgroundColor: "white",
              opacity: 0.2,
              marginVertical: 15,
            }}
          />
        )}
      </View>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  title: {
    fontSize: 15,
    fontWeight: "400",
    color: "white",
  },
  icon: {
    fontSize: 25,
    fontWeight: "400",
    color: "white",
    height: "100%",
  },

  textContainer: {
    flexDirection: "row",
    color: "white",
    alignItems: "center",
    justifyContent: "space-between",
  },
  mainContainer: {
    width: "100%",
    backgroundColor: "black",
    marginVerical: 40,
  },
});

export default PageNavigator;

Requirement is to implement this in UI

I was able to implement it by manually creating a each component but want more better approch