In my use case I have an array of characters, each character has multiple builds, and each build has a weapons string, and artifacts string. I’m making a tool to select portions of each string and assign them to a value, e.g. assigning index 3-49 of weapons to a specific weapon.

const [characterIndices, setCharacterIndices] = useState<
    { builds: { weaponIndices: SE[]; artifactSetIndices: SE[] }[] }[]
  >([
    ...characters.map((char) => {
      return {
        builds: [
          ...char.builds.map((_build) => {
            return {
              weaponIndices: [],
              artifactSetIndices: [],
            };
          }),
        ],
      };
    }),
  ]);

The SE type is as follows:

type SE = { start: number; end: number; code: string };
//start and end are the respective start and end of selected text
//code is the specific artifact or weapon

The weaponIndices and artifactSetIndices basically hold the start and end of selected text in a readonly textarea.
I have a function to add a SE to either weaponIndices or artifactSetIndices:

const addSE = (
    type: "weaponIndices" | "artifactSetIndices",
    { start, end, code }: SE,
    characterIndex: number,
    buildIndex: number
  ) => {
    let chars = characterIndices;
    chars[characterIndex].builds[buildIndex][type].push({ start, end, code });
    setCharacterIndices((_prev) => chars);
    console.log(characterIndices[characterIndex].builds[buildIndex][type]);
  };

I think that using a console log after using a set function isn’t recommended, but it does show what it’s intended to the weaponIndices, or artifactSetIndices after an entry is added. Passing the addSEfunction alongsidecharacterIndicesto a separate component, and usingaddSE`, does print the respective indices after adding an entry, but the component’s rendering isn’t updated.

It only shows up when I “soft reload” the page, when updating the files during the create-react-app live reload via npm run start.