【React】intersection-observerでrefを複数個所に指定したい。

Question

react-intersection-observerを使用してスクロールイベントを実装しています。

import React from 'react';
import { useInView } from 'react-intersection-observer';
import styled from "@emotion/styled";

export const InterSection = () => {
  const { ref, inView } = useInView({
    /* Optional options */
    threshold: 0,
  });

       return (
       <>
              <SDiv></SDiv>
              <Section ref={ref} inView={inView} >
                     <h2>{`Header inside viewport ${inView}.`}</h2>
                     <p>スクロールとするとヌルッと出てくるよ！</p>
              </Section>
              <Section ref={ref} inView={inView} >
                     <h2>{`Header inside viewport ${inView}.`}</h2>
                     <p>スクロールとするとヌルッと出てくるよ！2</p>
              </Section>

       </>
  );
};

const Section = styled.section`
  transition: all 1s ease;
  transform: ${(props) => (props.inView ? "translateY(0)" : "translateY(50px)")};
  opacity: ${(props) => (props.inView ? 1 : 0.5)};
  height: 500px;
`;

const SDiv = styled.div`
       width: 500px;
       height: 1000px;
       background-color: red;
`

ref属性（スクロール交差点）を複数箇所に指定したいです。
上記の実装ですと二つ目のセクションにスクロールが入ったタイミングで、二つのセクションが同時にアニメーションします。
同じrefとinViewを見ているので当たり前かとは思いますが、refとinViewを上のセクションと下のセクションで分けて、それぞれでスクロール検知をしてアニメーションさせる事は出来ないのでしょうか。
各コンポーネントによりref属性の指定は一つまでとなりますでしょうか？
ご存知の方いましたら、教えていただけると幸いです。