I have this piece of code below (in reactJS). Basically it is part of a widget and every time data updates, both “GraphInfo changed:” and “GraphData changed:” meaning that the uhsestate and useMemo are ignored. I basically want to derive different data from data with the variable of graphInfo.

Thank you for your help.

const BaseGraphOverTime = ({
  module_key,
  data,
  graph_type,
  y,
  strike,
  opt_type,
}) => {
  const [graphData, setGraphData] = useState(data);
  const { globalState } = useGlobal();

  const graphInfo = useMemo(
    () => ({
      y: y,
      strike: strike,
      opt_type: opt_type,
      ticker: globalState.ticker,
      expiration_date: globalState.expiration_date,
    }),
    [y, strike, opt_type, globalState.ticker, globalState.expiration_date]
  );

  useEffect(() => {
    console.log(
      "GraphInfo changed:",
      y,
      strike,
      opt_type,
      globalState.ticker,
      globalState.expiration_date
    );
  }, [y, strike, opt_type, globalState.ticker, globalState.expiration_date]);
  
  useEffect(() => {
    console.log("GraphData changed:", graphData);
  }, [graphData]);

  return null;
};

export default BaseGraphOverTime;

I tried changing the useMemo and useState to each other, but nothing helps. I even set the parent component with a useState for the data.