how to select multiple elements from an json array

I want to select the elements rendered using json array data, i am rendering the elements using json array where only most recent clicked element is getting select,i want to select every clicked element,like state of previously clicked element should be saved. In simple words when the element is clicked first time then it will be selected and when i click next element then the previous clicked element should remain selected.Click here to check image

 import React, {useContext} from 'react';
import {
  Dimensions,
  Image,
  StatusBar,
  Text,
  TouchableHighlight,
} from 'react-native';

import {Box, Button, ScrollView} from 'native-base';
import {useState} from 'react';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import {styles} from './createHabitStyles';
import {ApplicationContext} from '../../../context/application_ctx';
import {IconCheck, IconCircleBack} from '../../../svgIcons/icons';

export function ChooseTechnique({navigation, choose}) {
  const [chooseButton, setChooseButton] = useState();
  const {habitNavigation,setHabitNavigation,chooseSpan} =
    useContext(ApplicationContext);
  const {techniques, setTechniques} = useContext(ApplicationContext);

  let techniqueChooser = [
    {button: 'Mood Journal',src:require('../../../assets/images/techniqueBackgrounds/journal.jpg')},
    {button: 'Meditation',src:require('../../../assets/images/techniqueBackgrounds/meditation.jpg')},
    {button: 'ABCD',src:require('../../../assets/images/techniqueBackgrounds/abcd.jpg')},
    {button: 'Optimism',src:require('../../../assets/images/techniqueBackgrounds/optimism1.jpg')},
    {button: 'Journal',src:require('../../../assets/images/techniqueBackgrounds/journal.jpg')},
    {button: 'Motivation',src:require('../../../assets/images/techniqueBackgrounds/motivation.jpg')},
    {button: 'Defusion',src:require('../../../assets/images/techniqueBackgrounds/defusion.jpg')},
    {button: 'Values',src:require('../../../assets/images/techniqueBackgrounds/goals.jpg')},
    {button: 'Goals',src:require('../../../assets/images/techniqueBackgrounds/values.jpg')},
    {button: 'Thought Record',src:require('../../../assets/images/techniqueBackgrounds/thought.jpg')},
    {button: 'Breathe',src:require('../../../assets/images/techniqueBackgrounds/breathe.jpg')},
  ];


  return (
    <>
      <StatusBar
        backgroundColor={'#F5F5F5'}
        translucent={false}
        barStyle={'dark-content'}
      />
      <Box style={styles.MainBox}>
        <ScrollView>
          <Box style={{height: '6%', alignItems: 'center'}}>
            <Text style={styles.stepperTxt}>Create Habit</Text>
          </Box>
          <IconCircleBack
            onPress={() => setHabitNavigation(0)}
            style={{...styles.iconBack, top: '2.2%'}}
          />
          <Box style={styles.choosenBox}>
            <Box
              style={styles.choosenButton}>
              <Text style={{fontSize: 15, color: '#5D535C'}}>
                {chooseSpan.but}
              </Text>
            </Box>
            {chooseButton !== undefined ? (
              <Box
                style={styles.choosenButtonDynamic}>
                <Text style={{fontSize: 15, color: '#5D535C'}}>
                  {techniques}
                </Text>
              </Box>
            ) : (
              ''
            )}
          </Box>
          <Box style={{height: '6%', marginTop: '2%'}}>
            <Text style={styles.headTxt}>Choose a technique</Text>
            <Text
              style={styles.subHeading}>
              Create a habit from any one of your susbcribed techniques
            </Text>
          </Box>
          <Box style={{height: 1050}}>
            <Box style={{alignItems: 'center'}}>
              {techniqueChooser.map((data, i) => {
                return (
                  <TouchableHighlight
                    key={i}
                    underlayColor={'none'}
                    onPress={() => {
                      setChooseButton(i), setTechniques(data.button);
                    }}
                    style={styles.cardTechniques}>
                    <>
                    {chooseButton === i ? <IconCheck style={{position:'absolute',right:10,bottom:"10%",zIndex:1}} /> : ""}
                      <Image
                        style={styles.imageOptimism}
                        resizeMethod="scale"
                        resizeMode="cover"
                        source={data.src}
                      />
                      <Image
                        style={{
                         ...styles.imageBackdrop,
                          display: `${chooseButton === i ? 'none' : 'flex'}`,
                        }}
                        resizeMethod="scale"
                        resizeMode="cover"
                        source={require('../../../assets/images/techniqueBackgrounds/backdrop.png')}
                      />
                      <Box
                        style={styles.buttonTechnique}>
                        <Text
                          style={{
                            fontSize: 14,
                            fontWeight: 'bold',
                            color: '#5D535C',
                          }}>
                          {data.button}
                        </Text>
                      </Box>
                    </>
                  </TouchableHighlight>
                );
              })}
            </Box>
          </Box>
        </ScrollView>
        <Box
          style={{
            position: 'absolute',
            bottom: '3%',
            width: '100%',
            alignItems: 'center',
          }}>
          <Button
            isDisabled={chooseButton !== undefined ? false : true}
            style={{
              ...styles.button2,
              backgroundColor: `${
                chooseButton !== undefined ? '#36A2D0' : '#6D7A82'
              }`,
            }}
            isLoadingText="Continue"
            spinnerPlacement="end"
            onPress={() =>{techniques === "Meditation" ? setHabitNavigation(4) : techniques === 'Breathe' ? setHabitNavigation(6) : setHabitNavigation(3)}}>
            <MaterialIcons
              name="arrow-forward-ios"
              style={{
                fontSize: 20,
                color: `${chooseButton !== undefined ? 'white' : 'black'}`,
              }}
            />
          </Button>
        </Box>
      </Box>
    </>
  );
}