The code below is not doing what I expect:

chrome.runtime.onStartup.addListener(() => {
  chrome.storage.local.set({
    foo: {},
  });
});

chrome.tabs.onUpdated.addListener(async () => {
  const foo = await chrome.storage.local.get("foo");
  foo[Math.floor(Math.random() * 10).toString()] = "data";
  chrome.storage.local.set({
    foo: foo,
  });
});

It results in this data:

{
    "2": "data",
    "foo": {
        "5": "data",
        "foo": {
            "3": "data",
            "foo": {
                "2": "data",
//...
// (the rest omitted deliberately for not occupying too much space)

I don't get it, does this result makes sense? Probably I'm thinking the wrong way about it, but I can't find out what's my misunderstanding. If I'm setting foo which is a key already available in the object, shouldn't it be updated (and not get nested)? My end goal is a structure like this(please forget about the Math.random, that was just for the example):

{
  foo: {
    "AB4": "data1",
    "5C2": "data2"
  }
}

and I want it to turn into something like this after update:

{
  foo: {
    "AB4": "data1",
    "5C2": "data2",
    "DA1": "data3"
  }
}