chrome.storage.sync.set value is not available in content script using react chrome extension

Question

This is my FormComponent.tsx which used to store input key in local storage but storage key isn't pushed in localstorage I am using chrome.storage.sync.set

import React,{useState,useEffect,useRef,useCallback} from "react";


export default function FormComponent() {
    
    const [apikey, setApikey] = useState('');
    
    const [isSending, setIsSending] = useState(false)
    
    const isMounted = useRef(true)
  
    // set isMounted to false when we unmount the component
    useEffect(() => {
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
            const currentTabID = tabs.length === 0 ? 0 : tabs[0].id!;
            chrome.tabs.sendMessage(currentTabID, { access: true },response => {
                setIsSending(response);        
            });
          });        
    }, [])
  
    const sendRequest = useCallback(async () => {
      // don't send again while we are sending
      if (isSending) return
      // update state
      setIsSending(true)
      // send the actual request            
      // api request goes here 
      // once the request is sent, update state again
      if (isMounted.current) // only update if we are still mounted
        setIsSending(false)
    }, [isSending]) // update the callback if the state changes
  
  
    const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
      // Preventing the page from reloading
      event.preventDefault();  

      chrome.storage.sync.set({'some_os_key': apikey}, function() {
        sendRequest();
      });         
    }

    return (
        <React.Fragment>
            <form onSubmit={submitForm}>
            <div className="mb-6">
                <label htmlFor="success" className="block mb-2 text-sm font-medium text-green-700 dark:text-green-500">Your apikey</label>
                <input 
                value={apikey}
                onChange={(e) => setApikey(e.target.value)}
                type="text"
                 id="success" 
                 className="bg-green-50 border border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-gray-700 dark:border-green-500" placeholder="apikey goes here.."/>
            </div>
            <div className="rounded-md shadow">
                <button 
                className="w-full flex items-center justify-center rounded-md border border-transparent bg-sky-500 px-5 py-1 text-sm font-medium text-white hover:bg-sky-600"> Validate Key</button>
            </div>                
            </form>
        </React.Fragment>
    );
}

and my feature.ts which used to get storage key

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.access === true) {
    chrome.storage.sync.get(["some_so_key"], (result) => {
      console.log(`localstorage apikey goes here = ${JSON.stringify(result)}`);
    });

    //condition goes here 
    return true;
  }
});

Problem is some_so_key is not available in Application local storage. How can i resolve this.

Thanks in Advance!