Chrome Extention chrome.tabs.captureVisibleTab return undefined

Trying to get screenshot of opened tab on browser through a chrome extention. Using chrome.tabs.captureVisibleTab to achieve this.

This is the code on background script-

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log(request, sender);
  chrome.tabs.captureVisibleTab(sender.tab.windowId, {}, function (dataUrl) {
    console.log('inside capture');
    sendResponse({
      imgSrc: dataUrl
    });
    console.log(dataUrl);  // prints undefined
  });

  return true;
});

code on content script:

    useEffect(() => {
    chrome.runtime.sendMessage(
      {
        msg: 'capture'
      },
      function (response) {
        console.log(response.dataUrl);  // prints undefined
      }
    );
  }, []);

manifest code:

    "manifest_version": 3,
 "permissions": [
    "tabs",
    "alarms",
    "contextMenus",
    "storage",
    "activeTab",
    "<all_urls>"
  ],