sharepoint online – Fabric UI Module “Modal Dialog” in React Web Part integrated but nothing appear

I have used the standard yo creation method to create a new SharePoint Framework web part.

I replaced the content of default webpart/component with the proposed script from Fabric UI -> Modal Dialog.

After some adaption I get no more errors. But my web part doesn’t show anything in my workbench. I pointed out that the “const” (isModalOpen, isDraggable, titleId) make the problems, maybe.

Has anybody any idea?

import * as React from 'react';
import styles from './ModalDialog.module.scss';
import { IModalDialogProps } from './IModalDialogProps';
import { useId, useBoolean } from '@uifabric/react-hooks';
import { } from '@microsoft/sp-lodash-subset';
import {
  getTheme,
  mergeStyleSets,
  FontWeights,
  ContextualMenu,
  Toggle,
  DefaultButton,
  Modal,
  IDragOptions,
  IconButton,
  IIconProps,
} from 'office-ui-fabric-react';

const dragOptions: IDragOptions = { moveMenuItemText: 'Move', closeMenuItemText: 'Close', menu: ContextualMenu, };
const cancelIcon: IIconProps = { iconName: 'Cancel' };

const theme = getTheme();
  const contentStyles = mergeStyleSets({
    container: {
      display: 'flex',
      flexFlow: 'column nowrap',
      alignItems: 'stretch',
    },
    header: (
      // eslint-disable-next-line deprecation/deprecation
      theme.fonts.xLargePlus,
      {
        flex: '1 1 auto',
        borderTop: `4px solid ${theme.palette.themePrimary}`,
        color: theme.palette.neutralPrimary,
        display: 'flex',
        alignItems: 'center',
        fontWeight: FontWeights.semibold,
        padding: '12px 12px 14px 24px',
      },
    ),
    body: {
      flex: '4 4 auto',
      padding: '0 24px 24px 24px',
      overflowY: 'hidden',
      selectors: {
        p: { margin: '14px 0' },
        'p:first-child': { marginTop: 0 },
        'p:last-child': { marginBottom: 0 },
      },
    },
  });
  const toggleStyles = { root: { marginBottom: '20px' } };
  const iconButtonStyles = {
    root: {
      color: theme.palette.neutralPrimary,
      marginLeft: 'auto',
      marginTop: '4px',
      marginRight: '2px',
    },
    rootHovered: {
      color: theme.palette.neutralDark,
    },
  };

export default class ModalDialog extends React.Component<IModalDialogProps, {}> {
  public render(): React.ReactElement<IModalDialogProps> {
    const (isModalOpen, { setTrue: showModal, setFalse: hideModal }) = useBoolean(false);
    const (isDraggable, { toggle: toggleIsDraggable }) = useBoolean(false);
    const titleId = useId('title');
    return (
      <div className={ styles.modalDialog }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <div>
                <p>Test Text</p>
                <DefaultButton text={this.props.description} />
                <Toggle styles={toggleStyles} label="Is draggable" inlineLabel onChange={toggleIsDraggable} checked={isDraggable} />
                <Modal titleAriaId={titleId} isOpen={isModalOpen} onDismiss={hideModal} isBlocking={false} containerClassName={contentStyles.container} dragOptions={isDraggable ? dragOptions : undefined} >
                    <div className={contentStyles.header}>
                        <span id={titleId}>Lorem Ipsum</span>
                        <IconButton styles={iconButtonStyles} iconProps={cancelIcon} ariaLabel="Close popup modal" onClick={hideModal} />
                    </div>
                    <div className={contentStyles.body}>
                        <p>Lorem ipsum dolor sit amet</p>
                    </div>
                </Modal>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}