Im trying to save a checkbox to asyncstorage and reading it but it doesn't work

This is the Checkbox component it gets the async storage @key through props

I have multiple checkboxes because of that i made a component i dont know if that is the proplem

Checkbox.tsx:

export default function Checkbox({ storeId }: CheckboxProps) {  const [isSelected, setIsSelected] = useState(false)  const [color, setColor] = useState('#fd4e4e')  function changeSelect() {    setIsSelected(!isSelected)  }  React.useEffect(() => {    const data = async () => {      await readData(storeId)      await storeData(isSelected, storeId)    }    data()  }, [isSelected])  React.useEffect(() => {    const data = async () => {      await readData(storeId)      await storeData(isSelected, storeId)    }    data()  }, [])  const storeData = async (value: any, storeId: string) => {    try {      const jsonValue = JSON.stringify(value);      await AsyncStorage.setItem(storeId, jsonValue);    } catch (e) {    }  };  const readData = async (storeId: string) => {    try {      const value = await AsyncStorage.getItem(storeId)      if (value !== null) {        if (value === 'true') {          if (isSelected) {            setIsSelected(true)          }        }        if (value === 'false') {          if (!isSelected) {            setIsSelected(false)          }        }      }    } catch (e) {    }  }  return (<View><Pressable        onPress={changeSelect}        style={[styles.checkboxBase, { borderColor: color }, isSelected && { backgroundColor: color }]}>        {isSelected && <Ionicons name="md-checkmark-sharp" size={40} color="white" style={styles.icon} />}</Pressable></View>  );}