const chartTypeSegmented = isPreviewChart ? (
    <Popconfirm
      title="Are you sure you want to change the chart type?"
      onConfirm={() => setChart({ ...chartSelectionOption })}
      okText="Yes"
      cancelText="No"
    >
      <Segmented
        className="reportButtons"
        onChange={(value) => setChartSelectionOption((item) => ({ ...item, type: value }))}
        defaultValue={chart.type}
        options={options}
      />
    </Popconfirm>
  ) : (
    <Segmented
      className="reportButtons"
      onChange={(value) => setChart((item) => ({ ...item, type: value }))}
      defaultValue={chart.type}
      options={options}
    />
  );

I want to require users to confirm their choice using a Popconfirm before allowing them to change the segmented control item. However, when I place the segmented control inside the Popconfirm, the confirmation box appears briefly and then disappears without giving the user the opportunity to confirm or cancel.

I tried using setting the states differently. I want a prompt from user before changing the segmented’s items