[BUG] OuiCheckableCard onChange fire twice after checkbox clicked

[wanglam]

Describe the bug
The onChange property of OuiCheckableCard will be triggered twice after checkbox clicked. The onChange callback should only be fired once for single checkbox click. It seems the duplicated onChange was be fired by [this line].(https://github.com/opensearch-project/oui/blob/main/src/components/card/checkable_card/checkable_card.tsx#L113)

To Reproduce

Here is the sample code:

import React, { useState } from 'react';

import { OuiCheckableCard } from '@opensearch-project/oui';

import { htmlIdGenerator } from '@opensearch-project/oui/lib/services';

export default () => {
  return (
    <OuiCheckableCard
      id={htmlIdGenerator()()}
      label="I am a checkbox"
      checkableType="checkbox"
      value="checkbox1"
      checked={checkbox}
      onChange={() => {
        console.log("on change called.");
      }}
    />
  );
};

The on change called will output twice after checkbox clicked.

Expected behavior

It should only fired once for single checkbox click.

Screenshots

Host/Environment (please complete the following information):

• OUI Version: [e.g. 1.0]
• OSD Version (if applicable): [e.g. 2.7.0]
• OS: [e.g. iOS]
• Browser and version [e.g. Chrome 90]

Additional context
N/A

[dblock]

Catch All Triage - 1 2 3 4 5 6