webpack-hot-middleware doesn't remove element but add new ones on refresh

Question

I'm trying to make a quick boilerplate for a project but I'm struggling with a problem when reloading the page.

I have this piece of code in my app.js:

import * as d3 from 'd3'

import { Hello } from './component'
import css from './styles.css'

function Greetings( name ) {
  d3.select('body')
    .append('h1')
    .html(Hello(name))
}
Greetings('John')

// HMR live reload
if (module.hot) {
  module.hot.accept();
}

When I launch the page I can see the H1 added to the DOM but when I'm making a change (eg. the parameter of Greetings to Marie) it doesn't update the current one but add a new element and so on.

So I have in my DOM:

<h1>Hello John</h1>
<h1>Hello Marie</h1>

Instead of

<h1>Hello Marie</h1>

I don't really know what's happening under the hood of Hot reload but it seems that it doesn't update the whole page!

Any help would be very appreciated!

Btw here's my webpack.config file:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry : [
    'webpack-hot-middleware/client',
    './src/app.js'
  ],
  output: {
    path: path.join(__dirname, '/dist'),
    publicPath: '/',
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.js$/,
        use : [
          {
            loader : 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}