Chat is not a Route component. All component children of Routes must be a <Route> or React.Fragment

Question

the chat.js code is:

  // {messages}
  // adding room ...
  // to pull the messages we put on firestore...

  useEffect(() => {
    if (roomId) {
      db.collection("rooms")
        .doc(roomId)
        .onSnapshot((snapshot) => setRoomName(snapshot.data().name));
      db.collection("rooms")
        .doc(roomId)
        .collection("messages")
        .orderBy("timestamp", "asc")
        .onSnapshot((snapshot) =>
          setMessages(snapshot.docs.map((doc) => doc.data()))
        );
    }
  }, [roomId]);
.........

export default Chat;

the app.js code is:

function App() {
  const [{ user }, dispatch] = useStateValue();
  //  we use BEM naming convention
  return (
    <div className="app">
      {!user ? (
        <Login />
      ) : (
        <div className="app__body">
          <Router>
            <Fragment>
            {/* using route parameters in React */}

            {/* Sidebar component */}
            <Sidebar />
            <Routes>
              <Route path="/rooms/:roomId">
                {/* Chat component */}
                <Chat />
              </Route>
              <Route path="/">
                {/* when you reach "/" then render the Home...
              <h1> Home</h1> */}
                <Chat />
              </Route>
            </Routes>
            </Fragment>
          </Router>
        </div>
      )}
    </div>
  );
}

export default App;

i have tried many changes but it doesn't seem to work. it is because of version issues but after logiging in I'm not able to reach the chat page. made the changes in the app.js file but chat.js seems confusing ..please help