How to display HTML content in next.js

I want to display content from an HTML file in next.js. I learned that I can use dangerouslySetInnerHTML in App.js to achieve this.

However, I keep getting a blank white screen when using it. I’ve tried sending the GET request to the index.html file but I keep getting a white screen.

App.js

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    async function fetchHtml() {
      try {
        const response = await fetch('index.html');
        const html = await response.text();
        setHtmlContent(html);
      } catch (error) {
        console.error('Error fetching HTML file:', error);
      }
    }

    fetchHtml();
  }, []);

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
  );
}

export default MyComponent;

My index.html just has boilerplate code and <p>Hello World</p>, so it should be showing the text on the page, however I get this white screen.

here is the white screen I’m getting

Here is my file directory: