JSFiddle - React, Tailwind, and code Playground

JavaScript

let object1 = {
  id: 1,
  nested: { prop1: 10, prop2: 200 }, // nested object
};

let object2 = {
	id: 2,
  nested: { prop1: 20 }, // nested object
};
 
// merge objects
let objExtend = $.extend( true, {}, object1, object2 );
let objAssign = Object.assign( {}, object1, object2 );
let objDeepMerge = mergeDeep( {}, object1, object2 );

// diff
console.log( objExtend ); // has nested object prop2
console.log( objAssign ); // doesn't have nested object prop2.
console.log( objDeepMerge ); // has nested object prop2.

function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

function mergeDeep(target, ...sources) {
  if (!sources.length) return target;
  const source = sources.shift();

  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }

  return mergeDeep(target, ...sources);
}