Объединение двух объектов с useContext и состоянием?

Question

Итак, у меня есть проблема, когда он не объединяет два объекта, поскольку refsContext пуст, когда useEffect вызывается после рендеринга. Он заканчивается только одной из ссылок в объекте. useEffect(() => {setRef(something)}, [ref]); приводит к бесконечному пустому объекту l oop. Я что-то пропустил?

refs.context.jsx

import { createContext } from "react";
const refsContext = createContext({});
export default refsContext;

Тот же код в нескольких файлах

/** @jsx jsx */
import React, { useContext, useEffect, useRef } from "react";
import refsContext from "../../context/refs.context";

const StackoverflowExample= () => {
  const projectsRef = useRef(null);
  const [ref, setRef] = useContext(refsContext);

  useEffect(() => {
    setRef({ ...ref, projects: projectsRef.current });
  }, []);

  return (
     <section ref={projectsRef}></section>
  );
};

export default StackoverflowExample;

App.jsx

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import Pages from "./Pages";
import { BrowserRouter } from "react-router-dom";
import refsContext from "./context/refs.context";


const App = () => {
  //Default Contexts
  const refsHook = useState({});

  console.log(refsHook[0]);

  //All my wrappers/providers for my App
  return (
    <refsContext.Provider value={refsHook}>
       <BrowserRouter>
          <Pages/>
       </BrowserRouter>
    </refsContext.Provider>
  );
};

render(<App />, document.getElementById("root"));