How to use the @react-md/form.useChoice 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 isUnstyled = currentTheme === "none";
  if (disabled && error) {
    setError(false);

const TextFieldTypes: FC = () => {
  const [currentTheme, handleThemeChange] = useChoice(
    "outline"
  );

  return (
    <form>
      <fieldset>
        {themes.map(theme =&gt; (
          </fieldset></form>

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 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 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 HandlingDuplicatedMessages: FC = ({
  duplicates,
  onDuplicateChange,
}) => {
  const addMessage = useAddMessage();
  const [key, handleKeyChange] = useChoice(ONLINE);
  return (
    <form> addMessage(MESSAGES[key])}&gt;
      <fieldset>
            <code>MessageQueue</code>
            {" duplicate behavior"}
          
        }
      &gt;
        </fieldset></form>

const UpdatingMessagePriority: FC = () => {
  const addMessage = useAddMessage();
  const [priority, handlePriorityChange] = useChoice("next");
  const queue = useQueue();
  const [running, setRunning] = useState(false);

  if (running && !queue.length) {
    setRunning(false);
  }

  const exampleNextFlow = useCallback(() => {
    addMessage({
      messageId: "message-1",
      children: "First normal message",
      messagePriority: "normal",
    });
    addMessage({
      messageId: "message-2",
      children: "Second normal message",

const PositionExamples: FC = () => {
  const [position, handlePositionChange] = useChoice("left");
  const [visible, show, hide] = useToggle(false);

  return (
    
      <fieldset>
        {positions.map(pos =&gt; (
          
        ))}</fieldset>

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 CustomPortalContainer: FC = () => {
  const [selected, handleChange] = useChoice<"0" | "1" | "2">("0");

  return (
    <div>
      
      </div>