Как сохранять состояние toggle switch статических записей и записей от сервера в chrome storage?

Вот так выглядит наш статический json data.json:

[
    {
        "id": "settings",
        "title": "Настройки",
        "items": [
            { "id": "test1", "name": "Включить элемент 1" },
            { "id": "test2", "name": "Включить элемент 2" }
        ],
        "description": ""
    },
    {
        "id": "elements",
        "title": "Элементы",
        "items": [],
        "description": ""
    }
]

А это данные от сервера для меню id: elements: /elements:

[
   {
        "id": 1,
        "name": "Name",
        "test": {}
    },
    {
        "id": 2,
        "name": "Name 2",
        "tests": {}
    },
]

Код:

const [data, setData] = useState({
    elements: [], // данные от сервера /elements
    settings: { // настройки ID: settings static 
      test1: false,
      test2: false
    },
    loading: true
  });

  useEffect(() => {
    api.get('/elements')
      .then(response => {
        if (response.data && Array.isArray(response.data)) {
          setData(prev => ({
            ...prev,
            elements: response.data.map(item => ({...item, active: false})),
            loading: false
          }))
        }
      })
      .catch(error => {
        console.error('Error axios elements:', error);
      })
  }, []);

  const handleToggleSetting = () => {
    console.log(data);
  }

Как видим, я для каждого объекта который пришел из /elements, добавляю active: false. Статические настройки и elements я буду хранить в chrome storage для того, чтобы отобразить active настроек и элемента. Так вот мой и вопрос, как это сделать?

import staticData from '../../data.json';
import { chromeStorage } from '../../services/storage';

return (
    <React.Fragment>
      {staticData.length > 0 ? (
        <React.Fragment>
          {staticData.map(({ id, title, description, items }, _) => (
            <Menu key={id} title={title} description={description}>
              {items.length > 0 ? (
                items.map(({ id, name }, _) => (
                  <Menu.Item key={id} name={name} isActive={data.settings[id]} onChange={() => handleToggleSetting()} />
                ))
              ) : (
                !data.loading ? (
                  data.elements.length > 0 ? (
                    data.elements.map(({ id, name, color, active }, _) => (
                      <Menu.Item key={id} name={name} isActive={active} color={color} />
                    ))
                  ) : <div className="text-center">Список пуст.</div>
                ) : <div className="loading-circle" />
              )}
            </Menu>
          ))}
        </React.Fragment>
      ) : <div className="loading">Нет данных.</div>}
    </React.Fragment>
  )

isActive - это у нас checked для checkbox и onChange - это у нас функция также я для checkbox. Передать просто ключи в chrome storage для settings я смогу, а вот с данными от сервера как? Я хочу сделать одну функцию handleToggleSetting и как мне синхронизировать данные chrome storage с сервером? Представим, что у нас в chrome storage elements имеется обьект с id: 5, а на сервере его нет, значит нам нужно удалить этот обьект из chrome storage

Методы для работы с chromeStorage:

chromeStorage.setItem(key, value);
chromeStorage.getItem(key);
chromeStorage.removeItem(key);