How to use the mini-html-webpack-plugin.generateJSReferences function in mini-html-webpack-plugin

<title>${title}</title>
              ${MiniHtmlWebpackPlugin.generateCSSReferences({ files: css, publicPath })}
              <style>
                body {
                  margin: 0;
                  background-color: #F8F5FD;
                  text-rendering: optimizeLegibility;
                }
              </style>
            
            
              <div id="app"></div>
              ${MiniHtmlWebpackPlugin.generateJSReferences({ files: js, publicPath })}
            
          `,
    }),

return context => {
    const scripts = HTMLPlugin.generateJSReferences(context.js, context.publicPath)
    return minify(
      template(Object.assign({}, context, { scripts })),
      {
        collapseWhitespace: true
      }
    )
  }
}

${generateCSSReferences(css, publicPath)}
      
      
      
    
    
      <div id="rsg-root"></div>
      ${generateJSReferences(js, publicPath)}
    
  `;

const template = fs.readFileSync(
            path.join(__dirname, 'src', 'styleguidist.html'),
            'utf-8',
        );
        return template
            .replace(
                '',
                `<title>${title}</title>`,
            )
            .replace(
                '',
                MiniHtmlWebpackPlugin.generateCSSReferences(css, publicPath),
            )
            .replace(
                '',
                MiniHtmlWebpackPlugin.generateJSReferences(js, publicPath),
            );
    },
    sections: [

const template = ({
  title = 'ok',
  js,
  publicPath
}) => `




<style>*{box-sizing:border-box}body{font-family:system-ui,sans-serif;margin:0}</style>
<title>${title}</title>


<div id="root"></div>
${HTMLPlugin.generateJSReferences(js, publicPath)}


`

<title>${title}</title>
              ${MiniHtmlWebpackPlugin.generateCSSReferences(css, publicPath)}
              <style>
              body {
                margin: 0;
                text-rendering: optimizeLegibility;
              }
              </style>
            
            
              <div id="app"></div>
              ${MiniHtmlWebpackPlugin.generateJSReferences(js, publicPath)}
            
          `,
    }),

css = '',
  js,
  publicPath,
}) => `





<title>ok-mdx</title>
<style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style>
${css}


<div id="root">${html}</div>
${generateJSReferences(js, publicPath)}


`

`



<title>${title}</title>
${meta
    .map(({ name, content }) =&gt; ``)
    .join('\n')}
${links
    .map(({ rel, href }) =&gt; ``)
    .join('\n')}
<style>*{box-sizing:border-box}body{margin:0}</style>
${css}

<div id="root">${html}</div>
${staticBuild ? '' : generateJSReferences(js, publicPath)}
`

<title>${title}</title>
              ${MiniHtmlWebpackPlugin.generateCSSReferences(css, publicPath)}
              <style>
              body {
                margin: 0;
                text-rendering: optimizeLegibility;
              }
              </style>
            
            
              <div id="app"></div>
              ${MiniHtmlWebpackPlugin.generateJSReferences(js, publicPath)}
            
          `,
      }),

<title>${title}</title>
              ${MiniHtmlWebpackPlugin.generateCSSReferences({ files: css, publicPath })}
              <style>
                body {
                  margin: 0;
                  background-color: #F8F5FD;
                  text-rendering: optimizeLegibility;
                }
              </style>
            
            
              <div id="app"></div>
              ${MiniHtmlWebpackPlugin.generateJSReferences({ files: js, publicPath })}
            
          `,
    }),