【React】react-intersection-observerでstateを更新したい

Question

参考ページを見ながら作業をしております。
inViewがtrueとなった場合にstateを更新したいです。

import Header from "Header"
import Title from "Title"
import BoxA from "BoxA"
import BoxB from "BoxB"
import BoxC from "BoxC"
import BoxD from "BoxD"

const App = () => {
  const [title, setTitle] = useState("text01");

  const { ref, inView } = useInView({
    // オプション
    rootMargin: "-50px", // ref要素が現れてから50px過ぎたら
    triggerOnce: true, // 最初の一度だけ実行
  });

  return (
    <>
      <Header />
      <MainContent>
        <Title title={title} />
        <BoxA />
        <BoxB />
        <BoxC />
        <BoxD />
      </MainContent>
    </>
  );
};

やりたいこと

Titleコンポーネントはposition: fixed;で画面に固定しており、スクロールがBoxA〜BoxDに達した際にテキストをそれぞれ変更したいです。

質問

BoxA〜BoxDにref属性を付与しそこでstateを更新したいのですが、構文エラーとなり実施できません。
以下は構文エラーとなりますが、このような事がしたいというニュアンスが伝われば幸いです。

  <>
      <Header />
      <MainContent>
        <Title title={title} />
        <BoxA ref={ref} {inView && (setTitle("titleA"))} />
        <BoxB ref={ref} {inView && (setTitle("titleB"))} />
        <BoxC ref={ref} {inView && (setTitle("titleC"))} />
        <BoxD ref={ref} {inView && (setTitle("titleD"))} />
      </MainContent>
    </>
  );

BoxA〜BoxDはコンポーネントです。
どのように記載すべきか、正しい方法があれば教えていただきたいです。
ref属性を複数指定するのも違和感がありますが、このようなケースではどう対処すべきでしょうか？
恐れ入りますが、よろしくお願いいたします。

Answer 1

コンポーネントにrefを渡さず、各コンポーネント内のdivにrefを指定。

<div ref={ref}>
        {inView && setTitle("text")}

stateはuseContextで共通化して各コンポーネントから更新＆読み込みで解決しました。