How to use the @patternfly/react-core.DropdownPosition.right function in @patternfly/react-core

export const TableContext = React.createContext({
  headerData: null as ColumnsType,
  headerRows: null as IHeaderRow[],
  rows: [] as (IRow | string[])[]
});

class Table extends React.Component {
  static defaultProps = {
    children: null as React.ReactNode,
    className: '',
    variant: null as TableVariant,
    borders: true,
    rowLabeledBy: 'simple-node',
    expandId: 'expandable-toggle',
    contentId: 'expanded-content',
    dropdownPosition: DropdownPosition.right,
    dropdownDirection: DropdownDirection.down,
    header: undefined as React.ReactNode,
    caption: undefined as React.ReactNode,
    'aria-label': undefined as string,
    gridBreakPoint: TableGridBreakpoint.gridMd,
    role: 'grid',
    canSelectAll: true
  };

  isSelected = (row: IRow) => row.selected === true;

  areAllRowsSelected = (rows: IRow[]) => {
    if (rows === undefined || rows.length === 0) {
      return false;
    }
    return rows.every(row => this.isSelected(row) || (row.hasOwnProperty('parent') && !row.showSelect));

}
  };

  useEffect(() => {
    document.addEventListener('click', toggle, false);
    return () => {
      document.removeEventListener('click', toggle);
    };
  }, []);

  return (
    <div>
       setIsOpen(!isOpen)} /&gt;}
        dropdownItems={[
          
            {i18n._(t`Job Template`)}
          ,
          
            {i18n._(t`Workflow Template`)}
          ,</div>

>
      Logs
    ,
  ];

  return (
    <div>
      <div>
         setKebabIsOpen(!kebabIsOpen)}
          /&gt;}
          isOpen={kebabIsOpen}
          isPlain
          dropdownItems={kebabDropdownItems}
          position={DropdownPosition.right}
        /&gt;
        
      </div>
    </div>
  );
};

export const DemoDropdown: React.FC = ({ demos, onSelect }) => {
  const [isOpen, setOpen] = React.useState(false);
  return (
     {
        setOpen(false);
        onSelect(e.currentTarget.innerText);
      }}
      toggle={(
         setOpen(!isOpen)}
        >
          Load demo...
        
      )}
    />
  );

) : (
                      <a tabindex="{3}" role="{'menuitem'}" href="{'javascript:void(0)'}" data-testid="{'connection-card-delete-action'}">
                        {this.props.menuProps.i18nDeleteLabel}
                      </a>
                    )}
                  ,
                ]}
                position={DropdownPosition.right}
              /&gt;
            
          )}
          
            
              <div>
                <div>{this.props.icon}</div>
                <title data-testid="{'connection-card-title'}" size="lg"></title></div>

About
      
    ];

    return (
      
         this.setState({ isOpen: !isOpen })}
          toggle={(
             this.setState({ isOpen: isToggleOpen })}>
              
            
          )}
          isOpen={isOpen}
          dropdownItems={dropdownItems}
          position={DropdownPosition.right}
        />
        {showAboutModal
          ? (
             this.setState({ showAboutModal: !showAboutModal })}
            />
          )
          : null }
      
    );
  }
}

render() {
    const hasActionRights = this.canCreate() || this.canUpdate() || this.canDelete();
    const hasSidecarWorkloads = this.hasSidecarWorkloads();
    const toolTipMsgActions = !hasActionRights
      ? 'User has not permissions on this Service'
      : !hasSidecarWorkloads
      ? 'There are not Workloads with sidecar for this service'
      : 'There are not Workloads with ' + this.appLabelName + ' and ' + this.versionLabelName + ' labels';
    const validWorkloads = this.getValidWorkloads();
    const validActions = hasActionRights && hasSidecarWorkloads && validWorkloads;

    const dropdown = (
      
            Actions
          
        }
        isOpen={this.state.isActionsOpen}
        dropdownItems={this.renderDropdownItems()}
        disabled={!validActions}
        style={{ pointerEvents: validActions ? 'auto' : 'none' }}
      />
    );
    return (
      <>
        {!hasActionRights || !hasSidecarWorkloads
          ? this.renderTooltip('tooltip_wizard_actions', TooltipPosition.top, toolTipMsgActions, dropdown)

]}
        />,
        
           setKebabIsOpen(!kebabIsOpen)}
            />}
            isOpen={kebabIsOpen}
            isPlain
            dropdownItems={kebabDropdownItems}
            position={DropdownPosition.right}
          />

          
          
        ,
      

onExpand: null,
  className: '',
  variant: null,
  borders: true,
  sortBy: undefined,
  onSelect: undefined,
  onSort: undefined,
  actions: undefined,
  actionResolver: undefined,
  areActionsDisabled: undefined,
  bodyWrapper: undefined,
  rowWrapper: undefined,
  rowLabeledBy: 'simple-node',
  expandId: 'expandable-toggle',
  contentId: 'expanded-content',
  dropdownPosition: DropdownPosition.right,
  dropdownDirection: DropdownDirection.down,
  header: undefined,
  caption: undefined,
  'aria-label': undefined,
  gridBreakPoint: TableGridBreakpoint.gridMd,
  role: 'grid'
};

export const TableContext = React.createContext();

class Table extends React.Component {
  isSelected = row => row.selected === true;

  areAllRowsSelected = rows => {
    if (rows === undefined || rows.length === 0) {
      return false;

onSelect={() => this.handleSelect(template)}
                isSelected={selected.some(row => row.id === template.id)}
              />
            )}
            emptyStateControls={
              canAdd && (
                <div> {
                    this.node = node;
                  }}
                  key="add"
                &gt;
                  }
                    dropdownItems={[
                      
                        
                          {i18n._(t`Job Template`)}
                        
                      ,
                      
                        
                          {i18n._(t`Workflow Template`)}
                        
                      ,
                    ]}
                  /&gt;
                </div>
              )