continue flow integartion

src/screens/Writing/EmotionConvey.js

@@ -7,15 +7,18 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import { EMOTION_CONVEY } from "../../data/data";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 
-const EmotionConvey = () => {
+const EmotionConvey = ({ selected: selectedProp, setSelected: setSelectedProp }) => {
   const [containerLayout, setContainerLayout] = useState(null);
-  const [selected, setSelected] = useState(null);
+  const [internalSelected, setInternalSelected] = useState(null);
+  const selected = selectedProp ?? internalSelected;
+  const setSelected = setSelectedProp ?? setInternalSelected;
 
   const onPressSelect = (item) => {
-    if (selected === item) {
+    // item is full object { title, description, color }
+    if (selected?.title === item.title) {
       setSelected(null);
     } else {
-      setSelected(item);
+      setSelected({ title: item.title, description: item.description });
     }
   };
 
@@ -40,14 +43,14 @@ const EmotionConvey = () => {
               paddingTop: 5,
             }}
             renderItem={({ item, index }) => {
-              const selectedItem = selected === item.title;
+              const selectedItem = selected?.title === item.title;
 
               return (
                 <View style={{ paddingHorizontal: 5 }}>
                   <CreateLyricsHeader
                     colors={item.color}
                     tint={selectedItem ? "default" : "dark"}
-                    onPress={() => onPressSelect(item.title)}
+                    onPress={() => onPressSelect(item)}
                   >
                     <Text
                       style={{