continue flow integartion

src/screens/Studio/ChooseInstruments.js

@@ -7,15 +7,17 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import { BlurView } from "expo-blur";
 import { INSTRUMENTS } from "../../data/data";
 
-const ChooseInstruments = () => {
+const ChooseInstruments = ({ selected = [], setSelected }) => {
   const [containerLayout, setContainerLayout] = useState(null);
-  const [selected, setSelected] = useState(null);
 
   const onPressSelect = (item) => {
-    if (selected === item) {
-      setSelected(null);
-    } else {
-      setSelected(item);
+    if (!setSelected) return;
+    const list = Array.isArray(selected) ? selected : [];
+    const exists = list.includes(item);
+    if (exists) {
+      setSelected(list.filter((v) => v !== item));
+    } else if (list.length < 5) {
+      setSelected([...list, item]);
     }
   };
 
@@ -35,19 +37,18 @@ const ChooseInstruments = () => {
             showsVerticalScrollIndicator={false}
             contentContainerStyle={styles.contentContainer}
             renderItem={({ item }) => {
-              const selectedItem = selected === item;
+              const list = Array.isArray(selected) ? selected : [];
+              const selectedItem = list.includes(item);
 
               return (
                 <CreateLyricsHeader
                   onPress={() => onPressSelect(item)}
                   tint={selectedItem ? "default" : "dark"}
-                  colors={
-                    selectedItem
-                      ? ["#FFFFFF00", "#FFFFFF"]
-                      : [Palette.tran, Palette.tran]
-                  }
+                  colors={[Palette.tran, Palette.tran]}
                   containerStyle={{
                     ...styles.itemContainer,
+                    borderWidth: selectedItem ? 2 : 0,
+                    borderColor: selectedItem ? "#F94697" : "transparent",
                   }}
                 >
                   <View