Unable to push an object having useRef as one of the elements

Following is my state object using which I render a form which is a vertical progress form:

  const [methodology, setMethodology] = useState([
    {
      index: "3.1",
      title: "Review Methodology",
      ref: useRef(null),
      component: <Methodology handleAddMethodology={() => {}} />,
    },
  ]);

on click of a new button I want to append an similar object into the previous state, the ideal output should look like -

[
    {
      index: "3.1",
      title: "Review Methodology",
      ref: useRef(null),
      component: <Methodology handleAddMethodology={() => handleNewMethodology()} />,
    },
    {
      index: "3.2",
      title: "Review Methodology",
      ref: useRef(null),
      component: <Methodology handleAddMethodology={() => handleNewMethodology()} />,
    }
]

I tried this but it did not work as we can't use useRef inside a callback

  const handleNewMethodology = () => {
    const newMethodology = {
      index: `3.${methodology.length + 1}`,
      title: "New Methodology",
      ref: useRef(null),
      component: <Methodology handleAddMethodology={HandleAddMethodology} />,
    };
    setMethodology([...methodology, newMethodology]);
  };

What would be the ideal solution?

In React, useRef is a hook, and it should only be called at the top level of your React components. You're correct in stating that we can't use useRef inside a callback function like handleNewMethodology.

Instead, we can create the new ref at the top level of our component and then use it when we update our state. Try this out -->

import { useState, useRef, useEffect } from 'react';
import Methodology from './Methodology';

function MyComponent() {
  const [methodology, setMethodology] = useState([
    {
      index: "3.1",
      title: "Review Methodology",
      ref: useRef(null),
      component: <Methodology handleAddMethodology={handleNewMethodology} />,
    },
  ]);

  const newMethodologyRef = useRef(null);

  const handleNewMethodology = () => {
    const newMethodology = {
      index: `3.${methodology.length + 1}`,
      title: "New Methodology",
      ref: newMethodologyRef,
      component: <Methodology handleAddMethodology={handleNewMethodology} />,
    };
    setMethodology(prevMethodology => [...prevMethodology, newMethodology]);
  };

  // This effect is needed to initialize newMethodologyRef for each new instance
  useEffect(() => {
    newMethodologyRef.current = null;
  }, [methodology]);

  // ... Rest of your component logic
}