Управление состоянием чекбоксов

Ошибка: TypeError: undefined is not an object (evaluating 'checkbox.checkboxes.map')

Делаю форму , которая выводится после нажатия на чекбокс, если "Да" - выводим, если "Нет" - скрываем. Формы разные, относятся к своим категориям Так вот, как управлять этим состоянием чекбоксов?

Пробовал разные варианты, но нужного результата не могу добиться.

Может кто-нибудь подсказать, где проблемка или же подсказать более лучшую реализацию? Хотел добиться того, что если будет добавляться новый объект с формой, то просто добавить его в массив checkboxes

Ниже тестовый компонент:

export const Checkbox = () => {

    const checkboxes = [
          {
            id: 1,
            title: "Тест1",
            checkboxes: [{id: 'yes', label: 'Да', checked: false}, {id: 'no', label: 'Нет', checked: false}],
        },
{
            id: 2,
            title: "Тест2",
            checkboxes: [{id: 'yes', label: 'Да', checked: false}, {id: 'no', label: 'Нет', checked: false}],
        },
      ]

      const reducer = (checkboxes, action) => {
        if(action.type == 1) {
          return checkboxes[0].checkboxes.map(checkboxes => {
            if(checkboxes.id == action.payload) {
                checkboxes.checked == true ? checkboxes.checked = false : checkboxes.checked = true
            }else {
                checkboxes.checked = false
            }            
            return checkboxes;
          })
        }
        
      }

      const [state, dispatch] = useReducer(reducer, checkboxes);

      function checked(itemId, checkboxId) {
        // console.log(itemId, checkboxId)
        dispatch({ type: itemId, payload: checkboxId });
      }
      
      
    return (
       <View style={{padding: 20}}>
            {state.map((checkbox, idx) => (
            <View key={idx} style={{ display: 'flex', width: '50%', justifyContent: 'space-around' }}>
                <Text>{checkbox.title}</Text>
                {checkbox.checkboxes.map(check=> (
                  <View>
                    <Text>{check.label}</Text>
                     <TouchableOpacity 
                      onPress={()=> {checked(checkbox.id, check.id)}}
                      style={checkbox.checked === false ? styles.block : styles.block1}
                      /> 
                  </View>
                  
                ))}
              
            </View>
            ))}
        </View>
    )
}

const styles = StyleSheet.create({
    block: {
        width: 30,
        height: 30,
        backgroundColor: '#FFFFFF',
        borderColor: "#000",
        borderWidth: 2
    },
    block1: {
        width: 30,
        height: 30,
        backgroundColor: '#000',
        borderColor: "#000",
        borderWidth: 2
    },
})