Help with showing script ui. (content.tsx) when clicking on chrome extension

export const CustomModal = () => {
  const [open, setOpen] = React.useState(false)
  const [isVisible, setIsVisible] = useState(false)

 {/* Other code content */}

 useEffect(() => {
    const handleMessage = (
      request: Request,
      sender: any,
      sendResponse: any
    ) => {
      if (request.action === "toggleModal") {
        setIsVisible(!isVisible)
      }
    }

chrome.runtime.onMessage.addListener(handleMessage)

    return () => chrome.runtime.onMessage.removeListener(handleMessage)
  }, [isVisible])

  if (!isVisible) return null

  return (
    <div>
      {open && (
        <div
          ref={modalRef}
          style={{
            cursor: "grab",
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)"
          }}
          onMouseDown={onMouseDown}>

 {/* Other modal content */}

// src/contents/background.ts

chrome.action.onClicked.addListener((tab) => {
  if (tab.id) {
    // Execute a function in the context of the webpage
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: sendMessageToContentScript
    })
    // Send a message directly to the content script
    chrome.tabs.sendMessage(tab.id, { action: "toggleModal" })
  }
})

function sendMessageToContentScript() {
  console.log("Sending message to content script")
  chrome.runtime.sendMessage({ action: "toggleModal" })
}