Using with webpack-hot-middleware, issues

[NaHuGD]

"react": "18.2.0",
"webpack": "^5.73.0",
"webpack-dev-middleware": "^5.3.3",
"webpack-hot-middleware": "^2.25.1",
"react-refresh": "^0.14.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",

My project utilizes react18 createRoot for rendering and is configured with Node Express(), webpack-dev-middleware, and webpack-hot-middleware.
After upgrading from webpack 4 to webpack 5, I faced an issue where the webpack-hot-middleware didn't hot reload the view after API updates.
To address this issue, I decided to use the react-refresh-webpack-plugin, which resolved the problem. However, it introduced another issue: after API updates, an error would occur.
Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
I managed to resolve this issue by removing the if (module.hot) { module.hot.accept() } from index.js. Is this a valid solution?