UI wont update after setProps

[pcjaarvis]

import { useNode } from "@craftjs/core";
import { useSelector } from "react-redux";
import { getUrlParams } from "utils/index.js";
import React, { useEffect, useState } from "react";

function AssessmentComp2(props) {
  const {
    connectors: { connect },
    selected,
    actions: { setProp },
    id: nodeId,
    props: nodeProps,
  } = useNode((node) => ({
    selected: node.events.selected,
    props: node.data.props,
  }));

  console.log(props);
  console.log(nodeProps);
  const {
    items,
    question_description,
    question_id,
    question_title,
    is_mandatory,
  } = nodeProps;

  const previewStore = useSelector((state) => state.craftStore.isPreview);
  const linkPreview = getUrlParams();
  const isPreview = previewStore || linkPreview?.preview ? true : false;

  // Create a local state to mirror items for immediate UI update
  const [localItems, setLocalItems] = useState(items);
  console.log(localItems);
  // Sync localItems when nodeProps.items changes
  useEffect(() => {
    setLocalItems(nodeProps.items);
  }, [nodeProps.items]);



  // Handler for adding a new option inside the items array with a blank description
  const handleAddNewOption = () => {
    const newOption = {
      q_id: Date.now(), // Unique ID
      q_description: "", // Blank description
      q_isAnswer: false, // Default value
    };
    const newItems = [...localItems, newOption];
    setLocalItems(newItems);
    setProp((props) => {
      props.items = newItems;
    });
  };

  return (
    <div
      ref={connect}
      className={`flex flex-col px-[24px] py-[21px] gap-[24px] !font-roboto border-2 ${
        selected ? "border border-blue-500" : ""
      }`}
    >
      {props?.children}
      {/* Add options */}
      <div className="border-2 border-pink-500">
        {localItems.map((item, index) => {
          console.log(item);
          return <div key={index}>{item.q_description}</div>;
        })}
      </div>

      {/* ✅ Button to Add New Option Dynamically */}
      {!isPreview && (
        <button
          className="w-fit border-0 bg-transparent text-[15px] leading-[18px] text-[#8B5FF1] font-[400] cursor-pointer"
          onClick={handleAddNewOption}
        >
          + Add another
        </button>
      )}

      {/* ✅ Toggle for Mandatory Question */}
      {!isPreview && (
        <div className="flex justify-end items-center gap-2 whitespace-nowrap w-full">
          <div>Mandatory question</div>
          <button
            onClick={() =>
              setProp((props) => (props.is_mandatory = !props.is_mandatory))
            }
            className={`relative flex items-center h-6 w-10 rounded-full transition-colors border p-1 ${
              is_mandatory ? "bg-[#14BB4D]" : "bg-gray-300"
            }`}
          >
            <div
              className={`w-4 h-4 rounded-full transition-transform bg-white-A700 ${
                is_mandatory ? "translate-x-4" : "translate-x-0"
              }`}
            />
          </button>
        </div>
      )}
    </div>
  );
}

AssessmentComp2.craft = {
  displayName: "assess2",
  props: {
    question_id: "",
    is_mandatory: false,
    items: [
      { q_id: 1, q_description: "Arsenal", q_isAnswer: false },
      { q_id: 2, q_description: "Chelsea", q_isAnswer: true },
    ],
    question_description: "Which is the best team in EPL?",
    question_title: "Which is the best team in EPL?",
  },
};

export default AssessmentComp2;

After adding a new option using handleAddNewOption, the setProp correctly updates the items array, I can see the new item is added and gets logged in the items.map function but the UI does not update.
I tried to use local state to update the UI, but it still does not the UI, but the new items are getting added correctly,
what could be the issue?

[KingCosmic]

Everything looks fine from what I'm looking at, my first assumption was maybe a reference versus new value thing, but I see you're making sure to return new objects for your state. My only other thought is maybe with how you're pulling in the props through craft by just "props: node.data.props" not sure how that works but it's the only thing that looks weird compared to craftjs tutorials and how I have my own code setup.

[KingCosmic]

Possibly change your craft settings to apply defaultProps instead of just props

[pcjaarvis]

Thank you for the reply.
I figured it out.
It only happens when you pass empty values in setProps.