Height not resizing to form height about gravity-forms-iframe HOT 2 CLOSED

export default function FormBlock({attributes}: Props): JSX.Element {
  const {data}: {data?: string} = attributes
  let formData: FormData = {}
  if (data !== undefined) {
    formData = JSON.parse(data)
  }

  const [height, setHeight] = useState(500)
  const [width, setWidth] = useState('100%')

  const onWatchEventHandler = useCallback(
    ({origin, data}) => {
      const {message, height, index, width} = data
      if (
        origin === process.env.NEXT_PUBLIC_GRAVITY_FORMS_URL &&
        message === 'size' &&
        index === formData?.gravity_form_id
      ) {
        setHeight(height)
        setWidth(width)
      }
    },
    [formData?.gravity_form_id],
  )

  useEffect(() => {
    window.addEventListener('message', onWatchEventHandler)
    return () => window.removeEventListener('message', onWatchEventHandler)
  })

  return (
    <>
      <div className="max-w-4xl mx-auto">
        {formData?.gravity_form_id && (
          <iframe
            id="gfiframe"
            src={`${process.env.NEXT_PUBLIC_GRAVITY_FORMS_URL}/gfembed/?f=${formData?.gravity_form_id}`}
            width={width}
            height={height}
            frameBorder="0"
            className="gfiframe"
            scrolling="no"
            onLoad={e => {
              const iframe = e.target as HTMLIFrameElement
              iframe.contentWindow.postMessage(
                {
                  message: 'size',
                  index: formData?.gravity_form_id,
                },
                '*',
              )
            }}
          ></iframe>
        )}
      </div>
    </>
  )
}