I am using hook router 1.2.5 and I have a very simple home page as below:

import { useRoutes } from "hookrouter";
import React from "react";
import Nav from "./pages/Nav";
import AboutPage from "./pages/About";

const HomePage = () => {
  const routeResult = useRoutes({
    "/about": () => <AboutPage />
  });

  return (
    <div fluid>
      <div xs={3} md={1} lg={1} className="nav-container">
        <Nav />
      </div>
      <div xs={9} md={11} lg={11}>
        {routeResult || <AboutPage />}
      </div>
    </div>
  );
};

export default HomePage;

But when I run lint, I see below warnings show up.

  8:10  warning  Component definition is missing display name  react/display-name
  8:10  warning  Declare only one React component per file     react/no-multi-comp

I know I can disable these eslint warnings. But I would like to know how to fix them. For example, I don't have another component in my file. So why would it show react/no-multi-comp warning, or did I miss something? Any helps are appreciated.

UPDATE

I was able to fix react/display-name by replacing the arrow function as below:

const routeResult = useRoutes({
    "/about"() {
      return <AboutPage />;
    }
  });