Ich versuche, ein Modal mit einem +/- Zähler zu erstellen.

Ich denke jedoch, dass das Modal ihn nicht erkennt, da sich der Zustand in der zugrunde liegenden Komponente befindet. Irgendeine Idee, wie man das Problem beheben kann?

Ich habe versucht, es als Requisite weiterzugeben, aber ohne Erfolg

export default function ProgramCard() {

  const [count, setCount] = useState(0);
  const handleIncrement = () => {
    console.log(1)
      setCount(prevCount => prevCount + 1);
    };
    const handleDecrement = () => {
      setCount(prevCount => prevCount - 1);
    };

  const [opened, { open, close }] = useDisclosure(false);

  const openModal = () => modals.openConfirmModal({
    title: 'Input Data',
    children: (
      <div>
      <Button placeholder='-' onClick={handleDecrement}></Button>{"  #  "}{count}{"  #  "}
                            <Button placeholder='+' onClick={handleIncrement}></Button>
      </div>
    ),
    labels: { confirm: 'Confirm', cancel: 'Cancel' },
    onCancel: () => console.log('Cancel'),
    onConfirm: () => notifications.show({
      title: 'Input Submitted',
      message: 'Complete',
    }),
  });

  return (
    <Grid.Col span={2}>
      <Paper shadow="xs" radius="md" p="sm">
        <Text fw={700}>Sample</Text>
      <br></br>
      <Space h="xs" />
      <Button variant={'light'} radius="xl" size="xs" onClick={openModal}>
      Record
      </Button>
      
      </Paper>
    </Grid.Col>
    
  )
}

Ich habe versucht, es als Requisite weiterzugeben, aber ohne Erfolg