I am working on adding a React.js component to a JSP page in a Struts 2 application. I created a Babel configuration file and a Webpack configuration file, and I am able to create a bundle.js file. I am using this bundle.js file in my existing project jsp with a root element. Everything works fine in modern browsers like Chrome and Microsoft Edge, but it is not working in Internet Explorer. application only load on IE

app.js
webpack.config.js

index.js
package.json

As you can see in the above example polyfill I added. I tried multiple thing but it did not resolved completely
What I tried till now
first I was getting error at ()=> arrow function later I observed this arrow function is not getting supported but IE7 so I added this below line in app.js and it got fixed. arrow function converted into normal function
arrow function

then I got another below error.
console error exact error in bundle.js catch catch is part of promises

to fix this issue I added this line in index.js [enter image description here] (https://i.sstatic.net/51spAvfH.png) it is not fixed in fact got another error related to polyfill

Basically after this I got error for Symbol.for method that also not supported by IE.

on the react official site I got the info that polyfill is not working with react 18 to i downgrade to react17.

still this issue is not resolved. Help me with this I am not a pro in react.