I want to update the roomPricePostDiscount variable nested inside component. I used setBookingSummaryComponent setter function of useState hook and used ... spread operator. But It did not worked. I don’t know whether it is because I did mistake in using ... operator or setBookingSummaryComponent did not cause re-render for some reason.

Structure of component variable

{
id: 1,
content : {
    props:{
        roomInfo:{
            capacity: {
                // data
            },
            roomPricePostDiscount: 3000,
            // rest of the properties 
        }
    }
   }
}

What I tried

 setBookingSummaryComponent((prevComponents) => {
        const updatedComponents = prevComponents.map((component) => {
          if (component.id === roomId) {
            console.log(component)
            return {
              ...component,
              roomInfo: {
                ...component.roomInfo,
                roomPricePostDiscount: updatedRoomPricePostDiscount,
              },
            };
          }
          return component;
        });
        return updatedComponents;
      });