How to use the @sindresorhus/slugify function in @sindresorhus/slugify

const {
      inverted,
      stretch,
      title,
      subtitle,
      desc,
      id,
      className,
      style = {},
      children
    } = this.props

    const sectionProps = {}

    if (id || title) {
      sectionProps.id = id || slugify(title.toLowerCase())
    }

    const themeArgs = [
      styles,
      'section',
      theme(styles, `${sectionProps.id}-section`),
      inverted && theme(styles, 'inverted'),
      className
    ]

    return (

const generateSlug = valueToSlugify => slugify(valueToSlugify || '');

const H2 = ({children}) => (
	<a id="{slugify(children)}" href="{`#${slugify(children)}`}">
		<h1>{children}</h1>
	</a>
);

handleClick = async () => {
		const portfolioNameSlug = slugify(appContainer.state.portfolio.name).slice(0, 20);
		const filename = `hyperdex-${t('export.trades')}-${portfolioNameSlug}-${formatDate(Date.now(), 'YYYY-MM-DD')}`;

		const filePath = dialog.showSaveDialog(remote.getCurrentWindow(), {
			title: t('export.exportTradeHistory'),
			defaultPath: path.join(app.getPath('downloads'), filename),
			buttonLabel: 'Export',
			filters: [
				{
					name: 'CSV',
					extensions: ['csv'],
				},
			],
		});

		if (!filePath) {
			return;

const { getCollapseProps, getToggleProps, isOpen } = useCollapse({
        collapseStyles,
        expandStyles
    })

    return (
        <>
            
                
                    {(value.name === 'Commons' || value.contracts) && (
                        <button>
                            
                        </button>
                    )}
                    <a href="{`https://github.com/oceanprotocol/${slugify(">
                        <strong>{value.name || value.software}</strong>
                    </a>

const packageJsonPath = join(process.cwd(), 'package.json')
  if ((await exists(packageJsonPath)) === false) {
    return defaultConfig
  }
  const packageJson = require(packageJsonPath)
  const config = packageJson[constants.packageJson.configKey]
  if (typeof config === 'undefined' || Object.keys(config).length === 0) {
    return defaultConfig
  }
  return {
    ...createMenuItem(config),
    apiVersion:
      typeof config.apiVersion !== 'undefined'
        ? config.apiVersion
        : constants.apiVersion,
    id: typeof config.id === 'undefined' ? slugify(config.name) : config.id
  }
}

paths.map(async item => {
        const filePath = path.resolve(process.cwd(), `./${item}`);
        const ast = await parseMdx(filePath);
        const metasArray = getMetadata(ast);
        const finalRoute = path.basename(item).replace(path.extname(item), '');
        planEntries[item] = {
          filepath: item
        };
        metasArray &&
          metasArray.forEach(({ key, value }) => {
            if (key && value) planEntries[item][key] = value;
          });
        planEntries[item] = {
          ...planEntries[item],
          name: planEntries[item].name || humanize(slugify(finalRoute)),
          route: planEntries[item].route || `/${slugify(finalRoute)}`,
          nameChunk: `${slugify(finalRoute)}`,
          path: item,
        };
      })
    );

constructor(name: string) {
    const slug = slugify(name)

    this._name = name
    this._slug = slug
    this._route = `/${slug}`
    this._order = 0

    return this
  }