react HOC component not working after passed with dispatch and getstate from reduxjs

I have a piece of code down below work well before transformed to HOC component:

class Filters extends React.Component {
  componentDidMount() {
    const { store } = this.context;
    this.unsubscribe = store.subscribe(() => this.forceUpdate());
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { store } = this.context;
    const currentFilter = store.getState().visibilityFilter;
    const tags = ["All", "Active", "Completed"];
    return (
      <>
        Show:{" "}
        {tags.map((t, index) => {
          if (t === currentFilter) {
            return (
              <a href="#">
                {t + " "}
                {index === 2 ? " " : ","}
              </a>
            );
          }
          return (
            <a
              onClick={() => {
                store.dispatch({
                  type: "SET_VISIBILITY_FILTER",
                  filter: t
                });
              }}
            >
              {t + " "}
              {index === 2 ? " " : ","}
            </a>
          );
        })}
      </>
    );
  }
}
Filters.contextTypes = {
  store: React.PropTypes
};

I changed it into HOC component like below and its not working and not error notification.This code is from canonical tutorial todolist from reduxjs offical document.I check react offical document https://reactjs.org/docs/higher-order-components.html and did not find any exception which did not obey its rules.Does anyone know what is error?

const Originfilters = ({ currentFilter, handleClick = (f = f) }) => {
  const tags = ["All", "Active", "Completed"];
 
  return (
    <>
      Show:{" "}
      {tags.map((t, index) => {
        if (t === currentFilter) {
          return (
            <a href="#">
              {t + " "}
              {index === 2 ? " " : ","}
            </a>
          );
        }
        return (
          <a
            onClick={(t) => {
              handleClick(t);
            }}
          >
            {t + " "}
            {index === 2 ? " " : ","}
          </a>
        );
      })}
    </>
  );
};
class Filters extends React.Component {
  componentDidMount() {
    const { store } = this.context;
    this.unsubscribe = store.subscribe(() => this.forceUpdate());
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    const { store } = this.context;
    return (
      <Originfilters
        currentFilter={store.getState().visibilityFilter}
        handleClick={(filter) => {
          store.dispatch({
            type: "SET_VISIBILITY_FILTER",
            filter
          });
        }}
      />
    );
  }
}
Filters.contextTypes = {
  store: React.PropTypes
};

This logic is stale nowadays and cancel the question