Изменение размера высоты не вызывает обновления состояния React Hooks

Question

Я пытаюсь динамически изменять размер моей карусели при изменении. Однако я не могу вызвать изменение состояния исключительно из-за изменения роста ребенка.

Слушать детей было довольно хорошо, на самом деле я не совсем уверен, почему это не работает.

Проблема возникает, когда к карусели добавляется сообщение об ошибке ребенку. Он не обновляется.

В настоящее время лучшее, что я знаю, это интервал ... Есть ли лучший способ?

import React, {useState, useEffect, useRef} from 'react';
import './Carousel.scss';

// Wrapped children components must be placed inside of <div> elements
const Carousel = ({slideTo, children}) => {

  const [carouselStyle, setCarouselStyle] = useState({});
  const activeRef = useRef(null);
  const index = slideTo - 1

  const newChildren = [];
  children.map((d,i) => {
    let addClass = (d.props.className !== undefined) ? d.props.className: ""
    const newProps = { 
      key: i 
    };

    if(i === index){
      addClass += " active"
      newProps.ref = activeRef;
    }

    newProps.className = addClass.trim();

    const newChild = React.cloneElement(d, newProps);

    newChildren.push(newChild);
    return false
  });

  const carouselContainerStyle = {
    left: (((slideTo * 100) - 100) * -1) + "%",
    width: (newChildren.length * 100)+ "%"
  }



  useEffect(() => {
    const interval = setInterval(function(){
      console.log("int");

      if(activeRef != null){
        if(carouselStyle.height === undefined || carouselStyle.height !== activeRef.current.clientHeight){
          setCarouselStyle({
            height: activeRef.current.clientHeight,
          });
        }
      }

    },50)

    return () => {
      clearInterval(interval)
    }
  },[]);

  useEffect(() => {
    console.log("children update");

    if(activeRef.current !== null){
      setCarouselStyle({
        height: activeRef.current.clientHeight,
      });
    }
  },[slideTo,children]);


  return (
    <div className="carousel" style={carouselStyle}>
      <div style={carouselContainerStyle} className="carousel-container">
        {newChildren}
      </div>
    </div>
  );
};

export default Carousel;

Реализация

<Carousel slideTo={slide}>
 <div><SignIn/></div>
 <div><SignUp/></div>
</Carousel>