I have this strange issue that when I set a new state using spread operator only one object key get rewritten.

useEffect(() => {
    props.setCanvas([...props.canvas, {
                    block: 1,
                    innerBlock: !props.canvas.length ? 1 : (innerBlockChange(props.drop.blockType, props.canvas[props.canvas.length - 1].blockType) ? props.canvas[props.canvas.length - 1].innerBlock + 1 : props.canvas[props.canvas.length - 1].innerBlock),
                    blockType: (props.drop.blockType == 'center') ? 'center' : 'double',
                    class: 'placeholders',
                    position: props.drop.blockType,
                    size: 'regular',
                    entity: props.drag.element, // this one get rewritten
                    index: !props.canvas.length ? 1 : props.drop.main.querySelector('section.block:not(.mockup)').querySelectorAll('.placeholders').length + 1,
                    indexOfType: props.canvas.filter(el => el.entity = props.drag.element).length + 1,
                    connections: [],
                    properties: [],
                    comments: [],
                    embed: false
                }]);
},[props.drag]);

The entity key don't keep the stored value and changes when setState get executed again.

For example if for the first element it set to A When the setState run for second time with new entity value of B the first element of canvas states changes to B as well.

I tried to use a completely separate state (not the props.drag) for it but the issue still exist.