Multiple Content Scripts on One Page Not Working As Expected

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

const CustomButton = () => {
  const [expanded, setExpanded] = useState(false)
  const { user } = useFirebaseUser()

  return (
    <button
      style={{ fontFamily: "Inter" }}
      onClick={() => {
       //...
      }}
      className={`w-[300px] h-[50px] fixed transition-all duration-300 ease-in-out top-24 right-2 bg-red-500 px-4 py-2 rounded text-lg text-white font-semibold`}>
      //...
    </button>
  )
}

export const config: PlasmoCSConfig = {
  matches: ["https://jobs.netflix.com/jobs/*"],
  css: ["../font.css"]
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
  document.querySelector("main")

export default CustomButton

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

function CustomButtonTwo() {
  return (
    <div style={{ fontFamily: "Inter" }} className="">
      <span className="">Test</span>
    </div>
  )
}

export const config: PlasmoCSConfig = {
  matches: ["https://jobs.netflix.com/jobs/*"],
  css: ["../font.css"]
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
  document
    .querySelector("#additional-file")
    .parentElement.querySelector("label > button")

export default CustomButtonTwo