Parent width or height in React using Hooks

React Hook (Change heigth in next render)

//parent component
const parent = ({}) => {
  const [contentHeight, setContentHeight] = useState(null);
  
  return (
    <Fragment>
       <Row className="mx-auto margin-top-15px max-width-991px d-flex">
          <Col className="px-0">
            <ECard
              contentHeight={contentHeight}
              setContentHeight={setContentHeight}
              related={orderedRelated[0]}
              group={1}
              primaryType={primaryType}
            />
          </Col>
          <Col className="px-0 margin-x-11px">
            <Card
              contentHeight={contentHeight}
              setContentHeight={setContentHeight}
              related={orderedRelated[1]}
              group={2}
              primaryType={primaryType}
            />
          </Col>
          <Col className="px-0">
            <Card
              contentHeight={contentHeight}
              setContentHeight={setContentHeight}
              related={orderedRelated[2]}
              group={3}
              primaryType={primaryType}
            />
          </Col>
        </Row>
      </Fragment>

//child component

const Card = ({
  group,
  related,
  primaryType,
  contentHeight,
  setContentHeight,
}) => {
  const [isFlipped, setIsFlipped] = useState(false);
  const cardElementFront = useRef(null);

  const cardElementBack = (node) => {
    if (node && node.getBoundingClientRect().height > contentHeight) {
      setContentHeight(node.getBoundingClientRect().height);
    }
  };

  useEffect(() => {
    if (contentHeight > cardElementFront.current.offsetHeight) {
      cardElementFront.current.style.height = `${contentHeight}px`;
    }
  }, [contentHeight]);

  const containerStyle = { height: contentHeight };

  const handleFlip = (e) => {
    e.preventDefault();
    setIsFlipped(!isFlipped);
  };

  let currentHeaderAndImage = {};

  if (related) {
    currentHeaderAndImage = handleGetCurrentHeaderAndImage({ group, relatedEssence });
  }

  return relatedEssence ? (
    <Row className="one-section mx-auto margin-bottom-15px">
      <Col xs={12} className="px-0">
        <ReactCardFlip isFlipped={isFlipped}>
          <Col xs={12} className="px-0 card-item" key="front">
            <div ref={cardElementFront} style={containerStyle} className="one-container d-grid position-relative padding-bottom-10px bg-color-white width-313px minh-210px mx-auto">
              <Row className="mx-0">
                <h5 className={`text-uppercase bold mx-auto pt-3 coffee-kiosk-font-h1 color-${primaryType}_deep-dark`}>
                  {.header}
                </h5>
                <button
                  type="button"
                  onClick={handleFlip}
                  className="flip-btn"
                />
              </Row>
              <Row className={`mx-auto width-130px height-80px mt-1 bg-img-${currentHeaderAndImage.image}`} />
              <EssencesGraph
                score={score}
                group={group}
                primaryType={primaryType}
              />
            </div>
          </Col>

          <Col xs={12} className="px-0 card-item" key="back">
            <div ref={cardElementBack} style={containerStyle} className="one-container d-grid position-relative bg-color-white width-313px minh-210px mx-auto">
              <Row className="mx-0">
                <h5 className="text-uppercase bold mx-auto pt-3 font-h1">
                  {header}
                </h5>
                <button
                  type="button"
                  onClick={handleFlip}
                  className="flip-btn"
                />
              </Row>

              <Col className="d-flex flex-column justify-content-center align-items-center minh-164px">
                <p className="text-center">
                  {description}
                </p>
              </Col>
            </div>
          </Col>
        </ReactCardFlip>
      </Col>
    </Row>
  ) : null;
};