I have a question when i dev chrome extensions use React this is the log handler in background.js and BackgroundConsole is no error the loggerList is async

interface ILog {
  date: string;
  level: 'debug' | 'info' | 'warn' | 'error';
  msg: string;
}  
static loggerList: string= []
static async loggerLists(log: ILog[]) {
    this.setLogList().then(async (res) => {
      await res
      console.log(res);
      chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
        if (request.type === 'log') {
          sendResponse({
            log: res
          })
        }
        return true
      })
    })
  };
  static async setLogList() {
    return new Promise((resolve, reject) => {
      resolve(this.loggerList)
    })
  }

this is the popup.js when i use callback receive args

  const [logList, setlogList] = useState([])
  chrome.runtime.sendMessage({
    type: 'log'
  }, res => {
    setlogList(res.log)
    console.log(res, res.log, '1111111111111');
    //PopupConsole is endless loop to console.log(res, res.log, '1111111111111')
  })

this is the new code with pupup.js

  const [logList, setlogList] = useState([])
  useEffect(() => chrome.runtime.sendMessage({ type: "log" }, res => {
    console.log(res);
    setlogList(res.log)
  }), [])
      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        {
          logList.map((val: any) => {
            { JSON.stringify(val) }
            // return (
            <>
              <p>{val.date}</p>
              <p>{val.level}</p>
              <p>{val.msg}</p>
              <p>{val}</p>
            </>
            // )
          })
        }
      </Modal>

this is show page