fetch данные приходят два раза

как предотвратить двойной фетчинг данных, мешает при рендере html в элемент

const _d = document;
const buttonMore = _d.getElementById('myButton')
let num = 0;
async function main() {
    const response = await fetch(`http://127.0.0.1:8000/api/v1/?page=${num}`)
    const jsonData = await response.json()
    console.log(jsonData)
    const mapData = await jsonData.data.map((i) => {
      return `<h3>${i.attributes.title}</h3>`
    })
    // check for data counts
    if (jsonData.data.length < 10) buttonMore.style.display = "none"
    _d.getElementById('root').insertAdjacentHTML('beforeend', mapData.join(''))
}
buttonMore.addEventListener('click', (e) => {
  num++
  return main();
})

мешает тем, что по клику, рендерится два раза, тоесть повторяет теже елементы два раза

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
module.exports = {
  entry: ['@babel/polyfill', './index.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlPlugin({
        hash:  true,
        template: './src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }