React router v6 render changed to children not working

Question

I have a code react router domain v5

export const AuthenticateRoute: FC<RouteProps> = ({
  component: Component,
  ...rest
}) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        Component && validtoken() ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={`/login?msg=expired`}
          />
        )
      }
    />
  );
};

Now I am trying to convert this in v6 as I founder render as been changed from docs

props, just use regular element

export const AuthenticateRoute: FC = ({ component: Component, ...rest }) => { return ( <Route {...rest} children={(props) => Component && validtoken() ? ( <Component {...props} /> ) : ( <Redirect to={/login?msg=expired} /> ) } /> ); };

But its not working, its throwing an error, since I have tried many way so each time getting different error, mostly I was getting

Type '() => JSX.Element' is not assignable to type 'ReactNode'

Any help

Thanks