How to Individual selection? - react-native

Question

I'd like to make the entire selection into individual choices in the process of using the map method. But I don't know how.
My code:
let bouncyCheckboxRef = null;
const [bodyType, setBodyType] = useState([]);
const [standardSelected, setStandardSelected] = useState(false);
const [isSelected, setSelected] = useState([]);
const bodyGetData = async () => {
let body = [];
try {
let config = {
method: "get",
url:
"http://everyweardev-env.eba-azpdvh2m.ap-northeast-2.elasticbeanstalk.com/api/v1/user/bodyType/female",
headers: {},
};
axios(config).then(function (response) {
response.data.data.map((u) => {
switch (u.bodyType) {
case "standard":
body.push({
bodyType: "스탠다드",
imgUrl: u.imgUrl,
key: 1,
isChecked: true,
});
break;
case "reverseTriangle":
body.push({
bodyType: "역삼각형",
imgUrl: u.imgUrl,
key: 2,
isChecked: true,
});
break;
case "triangle":
body.push({
bodyType: "삼각형",
imgUrl: u.imgUrl,
key: 3,
isChecked: true,
});
break;
case "circle":
body.push({
bodyType: "원형",
imgUrl: u.imgUrl,
key: 4,
isChecked: true,
});
break;
case "hourglass":
body.push({
bodyType: "직사각형",
imgUrl: u.imgUrl,
key: 5,
isChecked: true,
});
break;
}
});
return setBodyType(body);
});
} catch (err) {
console.log(err);
}
};
useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => {
bodyGetData();
});
return unsubscribe;
}, [navigation]);
const checkBoxChange = (checked) => {
let newCheckBoxes = [...bodyType];
newCheckBoxes.forEach((item) => {
if (item.key) {
item.isChecked = checked;
}
});
setBodyType(newCheckBoxes);
};
return (
<View style={styles.container}>
<Text
style={{ fontSize: wp("5.5%"), fontWeight: "bold", marginBottom: 21 }}
>
자신의 체형을 선택해 주세요
</Text>
<View style={{ flexDirection: "row", marginBottom: hp("10%") }}>
<Text style={{ fontSize: wp("4.5%"), marginRight: wp("1%") }}>
더 정확한 평가를 받으실 수 있습니다
</Text>
<Image
source={require("../../images/smile.png")}
style={{ marginTop: hp("0.5%") }}
/>
</View>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={true}>
{bodyType.map((data) => (
<>
<TouchableHighlight
style={styles.bodySelect}
value={data.bodyType}
onChange={(e) => {
console.log(e);
}}
onPress={() => bouncyCheckboxRef?.onPress()}
>
<>
<BouncyCheckbox
checked={data.isChecked}
key={data.key}
onPress={checkBoxChange}
ref={(ref) => (bouncyCheckboxRef = ref)}
size={25}
fillColor="black"
unfillColor="#FFFFFF"
iconStyle={{ borderColor: "white" }}
textStyle={{ fontFamily: "JosefinSans-Regular" }}
disableBuiltInState
style={{
alignSelf: "flex-start",
marginLeft: wp("3%"),
marginTop: hp("2%"),
}}
/>
<SvgCssUri
uri={data.imgUrl}
width="90%"
height="60%"
marginTop="-5%"
key={data.key}
/>
<Text style={styles.bodytype}>{data.bodyType}</Text>
</>
</TouchableHighlight>
</>
))}
</ScrollView>
<TouchableHighlight
style={styles.button}
onPress={() => {
navigation.navigate("얼굴형 정보 입력");
}}
underlayColor="gray"
>
<>
<Text style={styles.text}>선택 완료</Text>
</>
</TouchableHighlight>
</View>