[React] 엘리먼트의 y 좌표값 찾는 법 w/ TypeScript

const Experience = () => {
  const { classes } = useStyles();
  
  /* 좌표값을 담을 useState */
  const [y, setY] = useState<number | undefined>();

 /* 어떤 엘리먼트를 참조(ref)할 것인지 */
  const experienceRef = useRef<HTMLDivElement>(null);
  
  /* y좌표값을 가져올 함수 */
  const getPosition = () => {
    const y = experienceRef.current?.offsetTop;
    setY(y);
  };
   /* 마운트될 때 함수 실행하기 */
  useEffect(() => {
    getPosition();
    window.addEventListener("resize", getPosition);
  }, []);

  console.log("y", y);

  const ref = useRef(null);
  useEffect(() => {
    import("@lottiefiles/lottie-player");
  });

  const itemList = expData.map((item, index) => (
    <Accordion.Item value={item.title} key={index}>
      <Accordion.Control>
        <ExperienceItem {...item} />
      </Accordion.Control>
      <Accordion.Panel>
        <Text size="sm">{item.content}</Text>
      </Accordion.Panel>
    </Accordion.Item>
  ));

  return (
    <Box className={classes.wrap} ref={experienceRef} id="experiences">
      <Box className={classes.wrapExperienceTitle}>
        <Title className={arsenal.className}>What I have done</Title>
        <Box className={classes.wrapLottieProject}>
          <lottie-player
            ref={ref}
            src="https://assets8.lottiefiles.com/packages/lf20_DbCYKfCXBZ.json"
            background="transparent"
            speed="1.5"
            style={{ width: "300px", height: "300px" }}
            loop
            autoplay
          ></lottie-player>
        </Box>
      </Box>
      <Box className={classes.wrapAccordion}>
        <Accordion chevronPosition="right" variant="contained">
          {itemList}
        </Accordion>
      </Box>
    </Box>
  );
};

export default Experience;

결과