Toggle Component BKG Color in React

Here is a Snack of it —> https://snack.expo.io/@oiver55/toggle-tags

When I click on my Tag components I would like it to turn green but all others to remain Orange. Currently the way it is set up, When I select another tag the previous selected tag remains green, How can I set it up so that only the item that is clicked is green, and all others remain or revert back to orange?

This is the app.js code from my Snack

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, useState } from 'react-native';
import Constants from 'expo-constants';
import Tag from './components/Tag'


export default function App() {
  
    const categories = ["Tracts", "Timely Greetings", "Symbolic Codes", "Miscellaneous", "Shepherd's Rod", "Jezreel Letters", "Answerers"];
  return (
    <View style={styles.container}>
     <ScrollView contentContainerStyle={styles.trim} horizontal>
     { categories.map((value, index) =>  <Tag title={value} />)}
     </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  trim: {
    height: 50,
    flexGrow:1,
    backgroundColor: "yellow",
  
  }
 
});

Here is the Tag component from my Expo Snack also

import React, { useState, useImperativeHandle } from "react";
import { Pressable, Text, View } from "react-native";

const tag = (props) => { 
const defaultColor = "orange";
const activeColor = "green";
const [active, setActive] = useState(false);

  return (
    <View style={{width: 80}} >      
        <Pressable onPress={() => setActive(true)}>
          <View style={{ borderRadius: 15, paddingHorizontal: 10, marginHorizontal: 10, backgroundColor: active ? activeColor : defaultColor }}>
            <Text style={{alignSelf:"center"}}>{props.title}</Text>
          </View>
        </Pressable>
      
    </View>
  );
};

export default tag;

Answer

Here is the working App: Expo Snack

Screenshot:

enter image description here

App.js

import React, { useState } from 'react';
import { Text, View, StyleSheet, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import Tag from './components/Tag';

export default function App() {
  const [activeIndex, setActiveIndex] = useState(100000);
  const categories = [
    'Tracts',
    'Timely Greetings',
    'Symbolic Codes',
    'Miscellaneous',
    "Shepherd's Rod",
    'Jezreel Letters',
    'Answerers',
  ];

  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.trim} horizontal>
        {categories.map((value, index) => (
          <Tag
            title={value}
            onPress={() => setActiveIndex(index)}
            active={index == activeIndex}
          />
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  trim: {
    position: 'fixed',
    left: 0,
    right: 0,
    backgroundColor: 'yellow',
    flexDirection: 'column',
    padding: 20,
  },
});

Tag.js

import React, { useState, useImperativeHandle } from 'react';
import { Pressable, Text, View } from 'react-native';

const Tag = ({ onPress, active, title }) => {
  const defaultColor = 'orange';
  const activeColor = 'green';

  return (
    <View>
      <Pressable onPress={onPress}>
        <View
          style={{
            borderRadius: 15,
            paddingHorizontal: 20,
            paddingVertical: 10,
            marginVertical: 5,
            backgroundColor: active ? activeColor : defaultColor,
          }}>
          <Text style={{ alignSelf: 'center' }}>{title}</Text>
        </View>
      </Pressable>
    </View>
  );
};

export default Tag;