accessing static html css and javascript inside a react app

I have my react app directory structure like this.

I am using react-router to display some tabs in my app and in one of the tabs, I want to display static HTML /CSS and Javascript contents in one of my tab.

My src/main folder contains the following folders:

1. js folder with all react app-related JS components

2. resources/static folder with images folder and one random index.html file which is not used.

Approach 1:

I am wondering if I can put my static HTML /CSS and Javascript contents inside the resources/static folder or should I create a webapp folder and put it in there, and after putting it there, would I be able to access the contents inside my tab using Iframe?

Approach 2: The other way which has worked for me is the following:

I put the static html,css and javascript in a folder(ProjectExternal) inside webapps folder of tomcat. And then access it like this from my react tab:

<Iframe
                url="https://mycurrentserver/ProjectExternal/index.html"
                width='100%'
                //height='500%'
                height='830px'
                allowFullScreen
            />

If I can get it through Approach 1 then I won't have to go through the time-consuming process of Approach 2 of putting files and folders somewhere else and accessing it from there