TypeError: can't define property "__indexColor": Object is not extensible

[anyuruf]

Trying to use Next relay data to feed to my react-force-graph2d following Will's tutorial https://lyonwj.com/blog/graph-visualization-with-graphql-react-force-graph. And no errors with static data in the page but log " TypeError: can't define property "__indexColor": Object is not extensible " in the browser.

'use client';
import { withRelay } from 'relay-nextjs';
import { getClientEnvironment } from '../lib/client-environment';
import { RelayProps, graphql, usePreloadedQuery } from "react-relay";
import node, { pages_GetNodesQuery as pages_GetNodesQueryType } from "../queries/__generated__/pages_GetNodesQuery.graphql";
import Spinner from 'react-bootstrap/Spinner';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import UserProfile from 'components/user-profile';
import dynamic from 'next/dynamic';
import { useState } from 'react';

const ForceGraph2D = dynamic(() => import('../lib/force.module'), {
  ssr: false
});

const pages_GetNodesQuery = graphql`
  query pages_GetNodesQuery {
    nodes {
    id
    firstName
    lastName
  }
  links{
    id
    source
    target
    parent 
  }
}
`;

function HomePage({ preloadedQuery }: RelayProps<{}, pages_GetNodesQueryType>) {
  const data = usePreloadedQuery(pages_GetNodesQuery, preloadedQuery);

  return (
    <>
      <Container>
        <Row>
          <Col md={9}>
            <ForceGraph2D graphData={data} />;
          </Col>
          <Col md={3}>
            <UserProfile />
          </Col>
        </Row>
      </Container>
    </>
  );
}

function Loading() {
  return (
    <Spinner animation="border" variant="primary" role="status">
      <span className="visually-hidden">Loading...</span>
    </Spinner>
  );
}

export default withRelay(HomePage, pages_GetNodesQuery, {
  // Fallback to render while the page is loading.
  // This property is optional.
  fallback: <Loading />,
  // Create a Relay environment on the client-side.
  // Note: This function must always return the same value.
  createClientEnvironment: () => getClientEnvironment()!,
  /* serverSideProps: async (ctx) => {
    // This is an example of getting an auth token from the request context.
    // If you don't need to authenticate users this can be removed and return an
    // empty object instead.
    const { getTokenFromCtx } = await import('lib/server/auth');
    const token = await getTokenFromCtx(ctx);
    if (token == null) {
      return {
        redirect: { destination: '/login', permanent: false },
      };
    }

    return { token };
  }, */
  // Server-side props can be accessed as the second argument
  // to this function.
  createServerEnvironment: async (
    ctx,
    // The object returned from serverSideProps. If you don't need a token
    // you can remove this argument.
    // { token }: { token: string }
  ) => {
    const { createServerEnvironment } = await import('../lib/server-environment');
    return createServerEnvironment();
  },
});

Help highly appreciated

[anyuruf]

This post help come with two solutions https://stackoverflow.com/questions/40089181/is-there-any-way-to-reverse-or-undo-the-preventextensions-function: 1- const graphData - JSON.parse(JSON.stringify(data)); 2- obj = Object.assign({}, obj);