Not able to Implement component based routing in react-router-dom v6

Question

I have a lots of routes in my project so I am using a array of routes to keep code clean but now after the release of v6 of react-router-dom ,I am getting a error:

** Uncaught Error: [PublicRoute] is not a component. All component children of must be a or <React.Fragment> **

const PublicRoute = ({ path, component: Component , ...otherProps }) => {
    return (
        <Route path={path} element={Component} {...otherProps} />
    )
};

const routes = [
    { component: Intro, path: '/', type: PublicRoute },
    { component: Login, path: '/login',  type: PublicRoute },
]

        <BrowserRouter>
            <Routes>
                {
                     routes.map(({ type: ComponentType, ...others },idx) => {
                         return <ComponentType key={idx} {...others}  />
                     })
                }
            </Routes>
        </BrowserRouter>

I read all docs ,but found no way to tackle this case.

Hope somebody will figure it out.