"TypeError: children is not a function" on GatsbyJS

[Dr-Dd]

Describe the bug Using the plugin inside of a GatsbyJS instance gives out the following error when trying to render it

"TypeError: children is not a function"

To Reproduce Steps to reproduce the behavior:

1. Implement a Gallery
2. Put a element inside

Expected behavior The gallery gets generated as usual

Desktop (please complete the following information):

• OS: Arch Linux
• Browser Firefox
• Version 109

Code:

import * as React from "react"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { graphql } from "gatsby"

import 'photoswipe/dist/photoswipe.css'
import { Gallery, Item } from 'react-photoswipe-gallery'

import Seo from "../components/seo"

import Navbar from "../components/navbar"

const GridPortfolioTemplate = ({data: {markdownRemark: portfolio}}) => {
    return (
    <div className="flex flex-col">
        <div className="z-20">
        <Navbar/>
        </div>
        <div className="mt-14">
            <Gallery>
            {portfolio.images.map(image => (
                          <Item>
                <GatsbyImage image={getImage(image)} />
                          </Item>
            ))}
            </Gallery>
        </div>
    </div>
    )

// Rest omitted for brevity

[irudoy]

Please check examples

    <Item
      original="https://placekitten.com/1024/768?image=1"
      thumbnail="https://placekitten.com/80/60?image=1"
      width="1024"
      height="768"
    >
      {({ ref, open }) => (
        <img ref={ref} onClick={open} src="https://placekitten.com/80/60?image=1" />
      )}
    </Item>