Set the height from one element due to another in react

setReactHeight.js

import React, { useState, useEffect, useRef } from 'react';

function Example() {
  const [jump, setJump] = useState(0);
  useEffect(() => {
    const set = useRef();
    setJump(set.current.clientHeight);
  });

  const sectionStyle = {
    background: "palegreen",
    height: {jump}.jump
  }
  
  const twenty = {
    height: "20rem"
  }

  return (
    <div>
      <div ref={set} style={twenty}>
        Set Height
      </div>
      <section  style={sectionStyle}>🦄</section>
    </div>
  );
}

// markup
const IndexPage = () => {
  return (
    <main>
      <title>Home Page</title>
      <Example />
    </main>
  )
}

export default IndexPage;

this is built in Gatsby but thats not really the point