I am building an app with rails-react. One of my views, search_terms/index, utilizes a react component called SearchTermIndex.js as follows:

<%= react_component("SearchTermIndex", { 
    
    currentUser: current_user,
    admin: User.where(admin: true)
          
          }) %>

When I try to load that page, the console gives me the error support for the experimental syntax 'jsx' isn't currently enabled. I have tried adding a .babelrc file as suggested here, and also tried changing my babel.config.js file from this:

...
return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
        {...

to this:

...return {
    presets: [
      isTestEnv && [
        '@babel/preset-env',
    '@babel/preset-react',
        {
          targets: {
            node: 'current'
          }
        }
      ],
      (isProductionEnv || isDevelopmentEnv) && [
        '@babel/preset-env',
    '@babel/preset-react',
        {...

I am guessing that the way Rails handles react files and bypasses the regular structure doesn't allow me to effectively make these changes, since the root folder of my application is outside the React environment(I guess?). Should I make the .babelrc file inside the components folder? Or somewhere else?

These also didn't seem to fix my issue, all of them seem to be for react-only apps: Creating a babel.config.js install babel/preset-react, add .babelrc to /src folder