js does not hot update

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

### Description
What you are reporting:
When I change a JS file, the browser console prints out where it says updated, and the network also requests the updated bundle, but the page doesn't change. It turns out that the updated bundle is in the head tag, while the bundle generated by the HTML-Webpack-plugin is in the body tag. So the page hasn't been updated. Is there any way to change where the updated bundle is inserted into the DOM

### Expected behavior

What you think should happen:
When I change a JS file, the page is updated to the latest

### Actual behavior

What actually happens:
When I change a JS file, the page is not up to date

### Environment

React Hot Loader version:
"react-hot-loader": "^4.13.0"
"@hot-loader/react-dom": "^17.0.0"
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13"
"webpack-dev-server": "^3.1.1"
"hot-module-replacement": "^3.0.4"

Run these commands in the project folder and fill in their results:

1. `node -v`: 12.10.0
2. `npm -v`: 6.10.3

Then, specify:

1. Operating system: Windows 7 Flagship 64-bit edition
2. Browser and version: Chrome v86.0.4240.75

### Reproducible Demo

Please take the time to create a new project that reproduces the issue.

You can copy your project that experiences the problem and start removing things until you’re left with the minimal reproducible demo. This helps contributors, and you might get to the root of your problem during that process.

Push to GitHub and paste the link here.

**webpack.common.js**

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: {
main: ['react-hot-loader/patch', './src/index.js']
},
output: {
path: path.resolve(__dirname, '..', './dist'),
filename: '[name]-[chunkhash:8].js'
},
resolve: {
alias: {
config: path.resolve(__dirname, '../config'),
src: path.resolve(__dirname, '..', './src')
}
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', './template/index.html'),
filename: 'index.html'
})
]
};

**webpack.dev.js**

const { merge } = require('webpack-merge');
const CommonConfig = require('./webpack.common.js');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(CommonConfig, {
mode: 'development',
output: {
...CommonConfig.output,
filename: '[name]-[hash:8].js'
},
resolve: {
...CommonConfig.resolve,
alias: {
...(CommonConfig.resolve.alias || {}),
'react-dom': '@hot-loader/react-dom'
}
},
module: {
rules: [{
test: /\.jsx?$/,
use: {
loader: 'babel-loader'
},
}, {
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}]
},
devServer: {
// host: ip,
contentBase: './dist',
port: 8200,
hot: true,
hotOnly: true,
inline: true
},
plugins: [
...CommonConfig.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') })
]
});

**index.js**

import React from 'react';
import ReactDom from 'react-dom';
import App from 'config/app.js';

const render = (Component) => {
ReactDom.render(
,
document.getElementById('app'));
};

render(App);

**config/app.js**

import { hot } from 'react-hot-loader/root';
import React, { Component } from 'react';
import Counter from 'src/counter/index.js';
import Number from 'src/number/index.js';

class App extends React.Component {
constructor(props) {
super(props);
};

render() {
return(

);
};
};

const HotApp = hot(App)

**babel.config.json**
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
}
}
],
[ "@babel/preset-react" ]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"react-hot-loader/babel"
]
}