I am pushing the same object to both a local array and an imported array in React, as follow:

import { EVENTS_DRAFT } from "../../store/stateless/event_draft";
...
        EVENTS_DRAFT.push({ //<=== imported array
          howmanykeys: "random string",
        });
        
        let EVENTS_DRAFT_LOCAL = ['EVENTS_DRAFT_LOCAL'];
        EVENTS_DRAFT_LOCAL.push({
          howmanykeys: "random string",
        })

As per console.log below, the EVENTS_DRAFT_LOCAL works as expected, but the imported EVENTS_DRAFT gives this "broken" array object with a seemly length of 2, but then has really 5 items when expanded.

If I push a string instead of an object, both arrays works as expected. I cannot reproduce this in a regular node app, so I suspect it may have to do with React's diffing algorithm, but really not sure.

getCreateTasks.js

import { EVENTS_DRAFT } from "../../store/stateless/event_draft";

const getCreateTasks = (calDate) => {
  EVENTS_DRAFT.push({
    howmanykeys: "random string",
  });

  let EVENTS_DRAFT_LOCAL = ["EVENTS_DRAFT_LOCAL"];
  EVENTS_DRAFT_LOCAL.push({
    howmanykeys: "random string",
  });

  console.log("EVENTS_DRAFT_LOCAL:");
  console.log(EVENTS_DRAFT_LOCAL);

  console.log("");

  console.log("EVENTS_DRAFT:");
  console.log(EVENTS_DRAFT);
};

export default getCreateTasks;

event_draft.js

export const EVENTS_DRAFT = ['EVENTS_DRAFT'];

full code on github here. https://github.com/SeanLuo-FSWD/RTFEJS.git