Chrome.Storage.Sync React Select

[NorkzYT]

I am making a React Chrome Extension that uses React-Select. Currently I want React-Select to save the option chosen before the Chrome Extension is closed.

The following code saves the changes when the page is switched but not when the Chrome Extension is closed.

import testoptions from "./select-options";


var test_value = testoptions[0];

const SettingsUI = () => {
  const styles = {
    control: (base) => ({
      ...base,
      "&:hover": {
        borderColor: "blue",
      },
    }),
    dropdownIndicator: (base) => ({
      ...base,
      color: "inherit",
    }),
    singleValue: (base) => ({
      ...base,
      color: "inherit",
    }),
  };

  const changeCase = (selectedOption) => {
    chrome.storage.sync.set({ test_case: selectedOption });
    chrome.storage.sync.get(["test_case"], function (result) {
      test_value = result.test_case;
    });
  };

  return (
    <div>
      <Select
        defaultValue={test_value}
        onChange={changeCase}
        options={testoptions}
        styles={styles}
      />
    </div>
  );
};

How would I resolve this issue?

I found the following, although I am not sure how to implement this. Any help will be appreciated.
https://stackoverflow.com/a/73219296/19395252

[NorkzYT]

Stale. Solved long ago, and I do not recall the solution.