fix: state in child component

src/design-system/components/chip/Chip.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   ChipProps,
   FilterChip,
@@ -8,9 +8,24 @@ import {
 } from './ChipTypes'
 
 const Chip: React.FC<ChipProps> = (props) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedOption, setSelectedOption] = useState<string | null>(null)
+
+  const handleSelectChange = (option: string) => {
+    setSelectedOption(option)
+  }
+
   switch (props.type) {
     case 'filter':
-      return <FilterChip {...props} />
+      return (
+        <FilterChip
+          {...props}
+          isOpen={isOpen}
+          onSelectChange={handleSelectChange}
+          selectedOption={selectedOption}
+          setIsOpen={setIsOpen}
+        />
+      )
     case 'input':
       return <InputChip {...props} />
     case 'category':

src/design-system/components/chip/ChipTypes.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useState } from 'react'
+import React, { CSSProperties } from 'react'
 import { cn } from '~/utils/cn'
 import CircleIcon from '@mui/icons-material/Circle'
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded'
@@ -99,22 +99,30 @@ const BaseChip: React.FC<
   )
 }
 
-export const FilterChip: React.FC<FilterChipProps> = ({
+export const FilterChip: React.FC<
+  FilterChipProps & {
+    isOpen: boolean
+    selectedOption: string | null
+    setIsOpen: (isOpen: boolean) => void
+    onSelectChange: (option: string) => void
+  }
+> = ({
   type,
   label,
   options = [],
   variant = 'filled',
   startIcon = <CircleIcon style={{ fontSize: 'inherit' }} />,
   endIcon = <ExpandMoreIcon style={{ fontSize: 'inherit' }} />,
   disabled = false,
-  size = 'md'
+  size = 'md',
+  isOpen,
+  setIsOpen,
+  selectedOption,
+  onSelectChange
 }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [selectedOption, setSelectedOption] = useState<string | null>(null)
-
   const handleSelect = (option: string) => {
-    setSelectedOption(option)
-    setIsOpen((prev) => !prev)
+    onSelectChange(option)
+    setIsOpen(false)
   }
 
   const isSelected = Boolean(selectedOption)