How we can find missing identity values?

Component that loads an external script working in React but not Next.js

Funck

so I have a component that loads an external script to display some Instagram posts in a grid on my page and it works fine in a create-react-app application but once I put the same component into an (unmodified) create-next-app, it still inserts the correct DOM elements but doesn't run the script to resize them to the window size anymore.

Do you maybe have some ideas what differences between plain React and Next.js could be causing this?

This is the component:

import PropTypes from 'prop-types'
import React, { useEffect } from 'react'

const loadFlowbox = () => new Promise(resolve => {
   (function(d, id) {
    if (!window.flowbox) { var f = function () { f.q.push(arguments); }; f.q = []; window.flowbox = f; }
    if (d.getElementById(id)) {return resolve();}
    var s = d.createElement('script'), fjs = d.scripts[d.scripts.length - 1]; s.id = id; s.async = true;
    s.src = 'https://connect.getflowbox.com/flowbox.js';
    fjs.parentNode.insertBefore(s, fjs);
    resolve()
  })(document, 'flowbox-js-embed');
})

const containerName = 'js-flowbox-flow'
const locale = 'en-GB'

const Flowbox = ({ flowKey: key }) => {
  const container = `${containerName}-${key}`
  useEffect(() => {
    loadFlowbox().then(() => {
     window.flowbox('init', { container: `#${container}`, key, locale })
    })
  }, [container, key])

  return <div id={container} />
}

Flowbox.propTypes = {
  flowKey: PropTypes.string.isRequired,
}

export default Flowbox