как сохранить высоту блока при меняющемся контенте?

Есть два экрана формы. один основной с самой формой и второй экран успеха показывающийся при успешном отправке формы. У формы высота 100%, у экрана успеха тоже высота 100% (относительно меньше чем на самой форме). Нужно сделать так , чтобы высота экрана успеха была такой же как высота формы. Проблема. Нельзя хардкодить высоту, чтобы сохранить адаптив. Так же нельзя это сделать через медиа запросы, ибо форма переиспользуется, и наполнение формы может меняться , потому-что в форму могут передаваться разные параметры контента. Реализуется данная форма на React. Еще момент, данная форма подгружается скриптом. Сделал, что через js высчитывал высоту формы и передавал ее обертке. Локально все круто работало, но на дев сервере нет. Возможно потому что сделал через хук useEffect и форма не успевала подгружаться и высота передавалась 0. так же нужно чтобы все было адаптивно) Кто-то может помочь решить данную проблему?))

const form: HTMLElement | null = document.querySelector('#form');
  const formInner = document.getElementById('formInner');

  useEffect(() => {
    const listener = (): void => {
      if (form && formInner) {
        form.style.height = `${formInner?.clientHeight}px`;
      }
    };
    listener();
    window.addEventListener('resize', listener);
    return (): void => {
      window.removeEventListener('resize', listener);
    };
  }, [formInner, form]);