rendering an html file within react - reactjs

Question

I am getting an html file from an external source and wanting to render it within a modal in react. It looks like it is receiving the file properly but I am getting this error.
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| <script language="javascript" ...
Here is my webpack.config,js file
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV == 'production';
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
},
plugins: [
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: 'babel-loader',
},
{
test: /\.css$/i,
use: [stylesHandler,'css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: [stylesHandler, 'css-loader', 'sass-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: 'asset',
},
{
test: /\.html$/i,
loader: "html-loader",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
};
module.exports = () => {
if (isProduction) {
config.mode = 'production';
config.plugins.push(new MiniCssExtractPlugin());
} else {
config.mode = 'development';
}
return config;
};
and here is my App.js file where my react code is located.
import './App.css';
import DOMPurify from 'dompurify';
import Modal from 'react-modal';
import htmlFile from './payee-verification-dropin.html'
import { useState } from 'react';
function App() {
const [showModal, setShowModal]= useState(false);
const myHTML = htmlFile;
const mySafeHTML = DOMPurify.sanitize(myHTML);
return (
<div className="App">
<Modal
isOpen={showModal}
onRequestClose={() => setShowModal(false)}
style={{
overlay: {},
content: {
position: "absolute",
top: "10%",
left: "25%",
width: "839px",
height: "81%",
borderRadius: "10px",
backgroundColor: "#FAFAFA",
padding: "0px",
},
}}
>
<div dangerouslySetInnerHTML={{_html: mySafeHTML }} />
<h1>Hello</h1>
</Modal>
<button onClick={() => setShowModal(true)}>CLick</button>
</div>
);
}
export default App;
Lert me know if you need more info to diagnose this problem.
Thank you!
I ran npx webpack init in order to set up webpack and I ran npm install --save-dev html-loader to try and install an html loader.