Type '{}' is missing the following properties from type 'Readonly<Record<string, unknown> & InjectedAuthRouterProps<(...args: any[]) => Action>>'

Question

I am trying to integrate redux-auth-wrapper in a typescript based React project. However, I am getting an error when I am trying to use the auth HOC wrapped component anywhere. I thought the auth related props would be injected by the auth HOC but it's asking me to provide them.

Error

Type '{}' is missing the following properties from type 'Readonly<Record<string,
unknown> & InjectedAuthRouterProps<(...args: any[]) => Action>>': redirect,
redirectPath, isAuthenticated, isAuthenticating

The error happens in my Routes file when I try to use the SubServiceOverview component which is wrapped using the HOC. Files are given below.

reduxAuth.ts

import { routerActions } from "connected-react-router";
import { AuthWrapperDecorator } from "redux-auth-wrapper";
import {
  connectedRouterRedirect,
  InjectedAuthRouterProps
} from "redux-auth-wrapper/history4/redirect";

import { RootState } from "state/configureStore";
import { REDUCER_NAME } from "state/user/constants";

const authenticatedSelector = (state: RootState) =>
  state[REDUCER_NAME] && state[REDUCER_NAME]["authenticated"];

export const makeUserIsAuthenticated = <
  OwnProps = Record<string, unknown>
>(): AuthWrapperDecorator<OwnProps & InjectedAuthRouterProps> =>
  connectedRouterRedirect<OwnProps, RootState>({
    redirectPath: "/login",
    authenticatedSelector,
    wrapperDisplayName: "UserIsAuthenticated",
    redirectAction: routerActions.replace
  });

export const userIsAuthenticated =
  makeUserIsAuthenticated<Record<string, unknown>>();

SubServiceOverview.tsx

import React from "react";
import { Link } from "react-router-dom";
import { userIsAuthenticated } from "libs/reduxAuth";
import services from "routes/services";

const ServiceOverview: React.FC = () => {
  return (
    <div>
      <ul>
        {services.map(service => (
          <li key={service.name}>
            <Link to={`/services/${service.name}`}>{service.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default userIsAuthenticated(ServiceOverview);

The error is thrown from this file. If I pass the SubServiceOverview in the component prop then the error goes away.

Routes.tsx

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { Login } from "containers";
import ServiceOverview from "containers/views/ServiceOverview";
import SubServiceOverview from "containers/views/SubServiceOverview";

const Routes: React.FC = () => {
  return (
    <>
      <Route exact path="/">
        <Redirect to="/services" />
      </Route>
      <Route component={Login} path="/login" /> //Login is also wrapped but doesn't throw error
      <Route exact component={ServiceOverview} path="/services" />
      <Route path="/services/:subService">
        <SubServiceOverview /> //this is the line that shows the error
      </Route>
    </>
  );
};

export default Routes;