Gatsby/React: Automatically replace all elements that are nth-generation descendents of a certain with elements

Question

Goal:

Create a photo gallery that lets you zoom in on large images using react-photo-gallery and react-intense

Possibly relevant:

Gallery will be part of a website with Gatsby frontend, managed by Strapi CMS, and hosted on an Ubuntu 18.04 VPS, but currently I am doing the development on Windows Subsystem for Linux (Ubuntu)

Process I need help with:

Automatically find all <img> elements that are nth-generation descendents of a <div> with class name .react-photo-gallery--gallery and dynamically replace them with <ReactIntense> elements.

Example of the html that the <Gallery> tag generates:

<div class="react-photo-gallery--gallery">
  <div style="position: relative; height: 1976.9px;">
    <img style="style" src="src" width="width" height="height">
    <img style="style" src="src" width="width" height="height">
    <img style="style" src="src" width="width" height="height">
  </div>
</div>

I want to replace each of those <img> elements with a ReactIntense tag automatically and set the src to what it was when it was an img, but I can't figure out how.

What I've tried

I have tried to use the recursive function I found below to wrap the gallery and replace its img descendants with ReactIntense elements, but I can't get it working. I've tried many other things too, and looked all over for relevant examples or documentation. The function below comes from another question on StackOverflow.

const RecursiveWrapper = props => {
    const wrappedChildren = React.Children.map(
        props.children,
        child => {
            const type = child.type === 'img' ? 'ReactIntense' : child.type
            if (child.props && child.props.children) {
                return React.cloneElement(
                    {
                        ...child,
                        type // substitute original type
                    },
                    {
                        ...child.props, // Wrap grandchildren too
                        children: (
                            <RecursiveWrapper>
                                {child.props.children}
                            </RecursiveWrapper>
                        )
                    }
                )
            }
            return child
        }
    );
    return (
        <>
          {wrappedChildren}
        </>
    )
}

(...)

<RecursiveWrapper>
  <Gallery photos={imageDicts} direction="column" columns={columns} />
</RecursiveWrapper>

The code above seems to do nothing, and I'm stuck.

Can anybody point me towards some relevant resources, or provide a solution? Thanks in advance.