I am making a figma plugin, why is the message not being sent?

Question

Below is the folder structure

<!-- ui.html -->

<h1 id="selectedState">선택되지 않았어요</h1>
<button id="temp">클릭</button>

<script>
    const sendMessageButton = document.getElementById('temp');
    sendMessageButton.addEventListener("click", function() {
        parent.postMessage({ pluginMessage: { type: 'UpdateText' } }, '*');
    });
</script>

The code below is the code.js logic

<!-- code.ts -->
figma.showUI(__html__, { height: 600 });

figma.on("selectionchange", () => {
  const selectedLayers = figma.currentPage.selection;
  if (selectedLayers.length > 0) {
    console.log("run this");
    figma.ui.postMessage({ type: 'SelectedTextUpdate' });
  }
});

figma.ui.onmessage = (message) => {
  if (message.type === "SelectedTextUpdate"){
    console.log("SelectedTextUpdate");
  }

  if (message.type === "UpdateText"){
    console.log("이거다");
  }

};

When I click the button whose id is temp in ui.html, the logic of UpdateText in code.js runs normally. The problem is the selectionchange that occurs when I click the figma element.

When an element is clicked in Figma, selectionchange occurs Send SelectedTextUpdate message and

figma.ui.onmessage = (message) => {
  if (message.type === "SelectedTextUpdate"){
    console.log("SelectedTextUpdate");
  }...........

This code should run, but it doesn't.

The logic you want is, when an element is selected in figma, in ui.html

<h1 id="selectedState">Not selected</h1>

I want to change the text value of this part

I would like some advice, thanks