laravel mix.js rendering - keep folder structure with wildcards

I'm using Laravel with React.jsx. My webpack.mix.js file looks like this:

const mix = require('laravel-mix');

if ( ! mix.inProduction()) {
    mix.webpackConfig({
        devtool: 'source-map'
    })
}

mix.react('resources/js/app.js', 'public/js')
    .react('resources/js/*.jsx', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

This is working exactly as I expect - any .jsx file directly in resources/js/gets compiled correctly into public/js/

What I want now, though, I'm struggling with. I want every .jsx file that in resources/js/pages/, AND every one of its subfolders, to be compliled and put into a matching folder in public/js/

So for example if I have a file resources/js/pages/a.jsx, I want it in public/js/pages/a.js, and if I have a file resources/js/pages/x/y/z/file.jsx, I of course naturally want it to appear in public/js/pages/x/y/z/file.js

I thought I could achieve this with wildcards, so I tried this:

mix.react('resources/js/pages/*/*.jsx', 'public/js')

However, that only went exactly one folder deep (eg into resources/js/pages/x/), didn't render anything directly in resources/js/pages, and put all the rendered files into public/js rather than keeping the subfolder structure.

Is there any way to achieve what I want? A sort of recursive folder/file wildcard that keeps the folder structure when putting into /public/js/?