gatsby image not rendering properly when inside portal

Hi, I uses gatsby-plugin-portal for my modal, and whenever i am trying to import gatsby image fluid inside of my modal, it never render, but on normal page it works.

here is my config

        {
            resolve: `gatsby-plugin-portal`,
            options: {
                key: 'modal',
                id: 'modal',
            },
        },

here is my portal config

const has_document = typeof document !== 'undefined'
const el_portal_root = has_document ? document.getElementById('modal') : null
const el_gatsby_root = has_document
    ? document.getElementById('___gatsby')
    : null
const blur_style = 'blur(2px)'

class Portal extends Component {
    constructor() {
        super()

        this.el_portal = has_document ? document.createElement('div') : null
    }

    componentDidMount = () => {
        el_portal_root.appendChild(this.el_portal)
    }

    componentWillUnmount = () => {
        el_portal_root.removeChild(this.el_portal)
    }

    render() {
        const { children, is_open, is_blurred } = this.props

        if (el_gatsby_root && is_blurred) {
            el_gatsby_root.style.filter = is_open ? blur_style : 'none'
        }
        if (this.el_portal) {
            return ReactDOM.createPortal(children, this.el_portal)
        }

        return null
    }
}

Portal.propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node,
    ]).isRequired,
    is_blurred: PropTypes.bool,
    is_open: PropTypes.bool.isRequired,

my image config

const Image = ({ img_name, alt, width }) => (
    <StaticQuery
        query={graphql`
            query {
                allImageSharp {
                    edges {
                        node {
                            fluid(
                                maxWidth: 1920
                                srcSetBreakpoints: [400, 600, 960, 1280, 1920]
                            ) {
                                ...GatsbyImageSharpFluid
                                originalName
                            }
                        }
                    }
                }
            }
        `}
        render={data => {
            const image = data.allImageSharp.edges.find(
                edge => edge.node.fluid.originalName === img_name,
            )
            if (!image) return null

            console.log(image.node.fluid)
            return (
                <ImageWrapper width={width}>
                    <Img alt={alt} fluid={image.node.fluid} />
                </ImageWrapper>
            )
        }}
    />
)

paulwhitaker / gatsby-plugin-portal

gatsby image not rendering properly when inside portal #1