我有一个名为agent.ts的文件，其中包含axios拦截器，我在这些拦截器中观察任何〉= 400和〈= 500的状态代码，当出现这样的错误时，我调用react-toastify toast。
到目前为止，一切都运行得很好。不过我希望能够做的是使用html作为消息的主体。通常我会通过创建一个自定义组件，然后使用该组件作为吐司消息的主体来实现这一点。但是因为我在常规的typescript文件中使用了react-toastify组件的outsode，所以我得到了一个编译错误。
下面是我的部分代码：

axios.interceptors.response.use(undefined, async (error) => {
  if (error.message === 'Network Error' && !error.response) {
    toast.error('Network error - make sure API is running!');
  }

  const { status, data } = error.response;

  if (status >= 400 && status < 500) {
    if (!data || !data.errors) {
      toast.error(`${status} API error. Please check the terminal!`);
      return;
    }

    console.warn('API Errors:', data.errors);
    Object.keys(data.errors).forEach(function (key) {
      toast.warn(data.errors[key].toString());
    });
  }

  if (status === 500) {
    toast.error('Server error - check the terminal for more info!');
  }

  throw error.response;
});

我附上了我看到的编译错误的屏幕截图：

你能告诉我什么是最好的方法吗？