使用Typescript react 路由如何导入内在属性

第一次使用Typescript时，我在贴图内部渲染一个组件，如下所示:

interface chatInterface {
  sender: string;
  avatar: string;
  content: string;
  time: string;
}
<>    
  {eachUser?.chats.map((item) =>
                  item.messages.map((obj: chatInterface, index: number) => {
                    return <ChatPage key={index} message={obj} />;
                  })
                )}
</>

ChatPage组件是:

function ChatPage(props: { message: chatInterface }) {
  const { sender, avatar, content, time } = props.message;
  return (
      <div>
        <ul>
          <li>
            <strong>{sender}:</strong> {content} at:{time}
          </li>
        </ul>
    </div>
  );
}

它工作得很好，但我想为ChatPage组件创建一个页面，但我不知道应该如何在react路由中导入它.这是我的应用程序.tsx组件:

<Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/chat" element={<ChatPage />} />
        </Routes>
      </Router>

上面说

Property 'message' is missing in type '{}' but required in type '{ message: chatInterface; }'

提前感谢