How to use the @react-md/form.useCheckboxState function in @react-md/form

const TextFieldThemeConfig: FC = ({
  idPrefix,
  children,
  renderField,
  disableDense,
  disableRightIcon,
}) => {
  const [useLeft, handleLeftChange, setLeftIcon] = useCheckboxState(false);
  const [useRight, handleRightChange, setRightIcon] = useCheckboxState(false);
  const [dense, handleDenseChange, setDense] = useCheckboxState(false);
  const [label, handleLabelChange, setLabel] = useCheckboxState(true);
  const [inline, handleInlineChange] = useCheckboxState(false);
  const [readOnly, handleReadOnlyChange, setReadOnly] = useCheckboxState(false);
  const [error, handleErrorChange, setError] = useCheckboxState(false);
  const [disabled, handleDisabledChange] = useCheckboxState(false);
  const [currentTheme, handleThemeChange] = useChoice(
    "outline",
    event => {
      // the "unstyled" state does not support icons and a label out of the box
      // and requires additional styling instead
      if (event.currentTarget.value === "none") {
        setLeftIcon(false);
        setRightIcon(false);
        setLabel(false);
      } else if (!label) {
        setLabel(true);
      }

const TextFieldThemeConfig: FC = ({
  idPrefix,
  children,
  renderField,
  disableDense,
  disableRightIcon,
}) => {
  const [useLeft, handleLeftChange, setLeftIcon] = useCheckboxState(false);
  const [useRight, handleRightChange, setRightIcon] = useCheckboxState(false);
  const [dense, handleDenseChange, setDense] = useCheckboxState(false);
  const [label, handleLabelChange, setLabel] = useCheckboxState(true);
  const [inline, handleInlineChange] = useCheckboxState(false);
  const [readOnly, handleReadOnlyChange, setReadOnly] = useCheckboxState(false);
  const [error, handleErrorChange, setError] = useCheckboxState(false);
  const [disabled, handleDisabledChange] = useCheckboxState(false);
  const [currentTheme, handleThemeChange] = useChoice(
    "outline",
    event => {
      // the "unstyled" state does not support icons and a label out of the box
      // and requires additional styling instead
      if (event.currentTarget.value === "none") {
        setLeftIcon(false);
        setRightIcon(false);
        setLabel(false);
      } else if (!label) {
        setLabel(true);
      }
    }

const FixingOverflowIssues: FC = () => {
  const [visible, , disable, toggle] = useToggle(false);
  const [portal, handlePortalChange] = useCheckboxState(false);
  return (
    
      
        
      
      <div>
        </div>

const NativeSelectExample: FC = () => {
  const [icon, handleIconChange, setIcon] = useCheckboxState(true);
  const [size, handleSizeChange] = useChoice("4");
  const [multiple, handleMultipleChange] = useCheckboxState(false);
  const [optgroup, handleOptgroupChange] = useCheckboxState(false);
  if (multiple && icon) {
    setIcon(false);
  }

  return (

const AsyncSwitchExample: FC = () => {
  const [loading, setLoading] = useState(false);
  const [checked, setChecked] = useState(false);
  const [fail, handleFailChange] = useCheckboxState(false);
  const [start] = useTimeout(() => {
    setLoading(false);
    if (fail) {
      setChecked(prevChecked => !prevChecked);
    }
  }, 5000);

  return (

const PersistentTabs: FC = () => {
  const [persistent, handleChange] = useCheckboxState(false);
  return (

const TextAreaExample: FC = () => {
  const [resize, handleResizeChange] = useChoice("auto");
  const [animate, handleAnimateChange] = useCheckboxState(true);
  const [rows, handleRowChange] = useChoice("2");
  const [maxRows, handleMaxRowChange, setMaxRows] = useChoice("-1");
  const rowsInt = parseInt(rows, 10);
  const maxRowsInt = parseInt(maxRows, 10);
  if (maxRowsInt !== -1 && maxRowsInt < rowsInt) {
    const i = MAX_ROWS.find(value => value >= rowsInt) || -1;
    setMaxRows(`${i}`);
  }

  return (
     (

const AsyncPageTransitions: FC = () => {
  const [checked, onChange] = useCheckboxState(false);
  const [page, setPage] = useState<0 | 1 | 2 | 3>(0);
  const Content = useFakeLazyImport(
    CurrentPage,
    page,
    checked ? 0 : 5000
  );

  return (

const CustomCheckbox: FC = ({
  defaultChecked = false,
  onChange: propOnChange,
  ...props
}) => {
  const [checked, onChange] = useCheckboxState(defaultChecked, propOnChange);

  return (
     : }
      disableIconOverlay
    />
  );
};

const NativeSelectExample: FC = () => {
  const [icon, handleIconChange, setIcon] = useCheckboxState(true);
  const [size, handleSizeChange] = useChoice("4");
  const [multiple, handleMultipleChange] = useCheckboxState(false);
  const [optgroup, handleOptgroupChange] = useCheckboxState(false);
  if (multiple && icon) {
    setIcon(false);
  }

  return (
     (