Enable JSX to use Algoliasearch

[jollydodo]

Our website is using flexsearch right now, but Algoliasearch would be a huge improvement. Everything was already setup and working (based on this tutorial: https://www.mcmurray.co.nz/blog/hugo-search-with-algolia/create-the-index/). However, the only thing left to do is install a nice modal for search. Unfortunately docsearch by Algolia is not an option, because our website does not exclusively feature docs. That shouldn't be a problem because for a small website since the free Algolia plan should suffice. Unfortunately almost all their autocomplete plugins rely heavily on jsx (https://www.algolia.com/blog/ux/replicating-the-algolia-documentation-search-with-autocomplete/). And this is where my problem is: I can't manage to get esbuild/babel to work. Every time I try to run the website, I get an error saying 'failed to transform xxxx.js' The JSX syntax extension is not currently enabled.

Esbuild sets 'babel' to true:

{{ if site.Params.add_ons.algoliaSearch -}}
{{ partial "footer/esbuild" (dict "src" "js/algoliasearch.js" "load" "async" "transpile" false "babel" true) -}}
{{ end -}}

the correct packages are installed:
npm install @babel/core @babel/preset-env @babel/preset-react

and I added this to the babel.config.js:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

However it still does not work which is really confusing me. If I manually run this: npx babel example.jsx --out-file example.js
with another config file in my root, everything works fine. So it really seems to have something to do with the esbuild partial I guess.