How to check for unique values in chrome.storage array

I am really struggling with this:
What I am trying to do is create an array that is stored in chrome.sync with the url of unique pages a user visits. Adding the url to the array works fine – what I am struggling with is how to check if that url already exists in the array. This is what I have currently:

function getURL(array) {
    chrome.tabs.query({active: true, lastFocusedWindow: true, currentWindow: true}, tabs => {
        let tabUrl = tabs[0].url;
        addArr(tabUrl, array);
    });
}

function addArr(tabUrl, array) {
    array.map((x) => {
        let urlCheck = x.url;
        console.log(urlCheck);
        if(urlCheck != tabUrl) {
           array.push(tabUrl);
           chrome.storage.sync.set({data: array}, function() {
               console.log("added")
           });
        }
    })
}

The annoying thing I can’t work out is that it works when I remove anything to do with the the map and only keep the:

           array.push(tabUrl);
           chrome.storage.sync.set({data: array}, function() {
               console.log("added")
           });

This makes even less sense because when I inspect the array by inspecting the popup and then looking at console, there is no error only an empty data array. The error that it gives me, however, when I inspect the popup (actually right click on extension) is

Error handling response: TypeError: Cannot read properties of
undefined (reading ‘url’) at
chrome-extension://jkhpfndgmiimdbmjbajgdnmgembbkmgf/getURL.js:31:30

That getURL.js line 31? That is part of the code that gets the active tab. i.e

let tabUrl = tabs[0].url;

which isn’t even in the same function.

Any ideas? I am totally stumped.