PayPal message is hidden by the script

[iamzain]

Here is the PayPal Messages implementation for next.js app:

import { COMPONENTS, DISABLE_FUNDING } from './PayPalBanner.constants';
import { PayPalBannerProps } from './PayPalBanner.types';
import styles from './PayPalBanner.module.scss';

export const PayPalBanner = ({
  placement,
  layout,
  color,
  ratio,
  clientId,
  currency,
}: PayPalBannerProps): JSX.Element => {
  const initialOptions = {
    'client-id': clientId,
    currency,
    components: COMPONENTS,
    'disable-funding': DISABLE_FUNDING,
  };

  const messagesOptions = {
    placement,
    className: styles['paypal-banner'],
    style: {
      layout,
      color,
      ratio,
    },
  };

  return (
    <PayPalScriptProvider options={initialOptions}>
      <PayPalMessages {...messagesOptions} />
    </PayPalScriptProvider>
  );
};

When using "4x1" ratio, the scripts hide the Message with this warning in the console:

"paypal_messages_hidden {description: 'PayPal Message has been hidden. Message must be vi…of 0px x 0px. Current container is 160px x 448px.', index: '4', duration: 4969, timestamp: '1657708224321'}".

Basically, the script changes the iframe style to "opacity: 0 !important". If the container height is changed according to the height of the Message it solves the problem at first glance. But when you change the height of the browser (make it lower) the Message is hidden again on reload.

How to solve this problem? Thanks!