React HighCharts when Export buttons are added Gatsby fails the build. gatsby version 5.12.3

[Usama-Malik9]

when I use react hightcharts export buttons ( which is buildin functionality of react highcharts ) in my gatsby project the build fails.

import highchartsExporting from 'highcharts/modules/exporting';
highchartsExporting(Highcharts);

"dependencies": {
"@reduxjs/toolkit": "^1.9.7",
"antd": "^5.10.0",
"axios": "^1.5.1",
"bootstrap": "^5.3.1",
"cookies-ts": "^1.0.5",
"dayjs": "^1.11.10",
"dotenv": "^16.3.1",
"gatsby": "^5.12.3",
"gatsby-image": "^3.11.0",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-manifest": "^5.13.0",
"gatsby-plugin-page-creator": "^5.13.1",
"gatsby-source-graphql": "^5.13.1",
"highcharts": "^11.3.0",
"highcharts-export-server": "^3.1.1",
"highcharts-exporting": "^0.1.7",
"highcharts-react-official": "^3.2.1",
"jarallax": "^2.1.4",
"jquery": "^3.7.1",
"js-cookie": "^3.0.5",
"justifiedGallery": "^3.8.1",
"leaflet": "^1.9.4",
"owl.carousel": "^2.3.4",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-bootstrap": "^2.8.0",
"react-countup": "^6.4.2",
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.6.0",
"react-file-viewer": "^1.2.1",
"react-helmet": "^6.1.0",
"react-icons": "^4.11.0",
"react-id-swiper": "^4.0.0",
"react-image-gallery": "^1.3.0",
"react-redux": "^8.1.3",
"react-router-dom": "^6.18.0",
"react-twitter-embed": "^4.0.4",
"react-twitter-widgets": "^1.11.0",
"react-viewer": "^3.2.2",
"redux-persist": "^6.0.0",
"swiper": "^10.2.0",
"url-search-params-polyfill": "^8.2.5"
},

can anyone suggest a different approach or know how to fix this?