Weird characters when merging two objects

I have this code

if (Platform.OS === 'android'&& !uiConfig) {        try {            uiConfig = JSON.parse(uiConfig);        } catch(e) {            console.log("err:", e)            uiConfig = {};        }    }    console.log("Ui COnfig 1:", uiConfig)    uiConfig = (width && height) ? {        ...uiConfig,        dimensions: Platform.OS === 'android' ? {            height: Math.floor(height / PixelRatio.get()),            width: Math.floor(width / PixelRatio.get()),        } : {            height: Math.floor(height),            width: Math.floor(width),        },    } : {...uiConfig};    console.log("Ui COnfig 2:", uiConfig)

where value of uiConfig is "{\"header\":false,\"controlBarElements\":{\"polls\":false}}"

When I run my app, I am getting these logs

Ui COnfig 1: {"header":false,"controlBarElements":{"polls":false}}

LOG Ui COnfig 2: {"0": "{", "1": """, "10": "f", "11": "a", "12":"l", "13": "s", "14": "e", "15": ",", "16": """, "17": "c", "18":"o", "19": "n", "2": "h", "20": "t", "21": "r", "22": "o", "23": "l","24": "B", "25": "a", "26": "r", "27": "E", "28": "l", "29": "e", "3":"e", "30": "m", "31": "e", "32": "n", "33": "t", "34": "s", "35":""", "36": ":", "37": "{", "38": """, "39": "p", "4": "a", "40":"o", "41": "l", "42": "l", "43": "s", "44": """, "45": ":", "46":"f", "47": "a", "48": "l", "49": "s", "5": "d", "50": "e", "51": "}","52": "}", "6": "e", "7": "r", "8": """, "9": ":", "dimensions":{"height": 759, "width": 392}}

Any idea from where these weird characters i.e ({"0": "{", "1": """, "10": "f", "11": "a", "...} could be coming?

Like I would've expected my obj to be (after mege)

 {"header":false,"controlBarElements":{"polls":false},"dimensions": {"height": 759, "width": 392}}