"React has detected a change in the order of Hook" - reactjs

Question

I encountered this issue while writing the test for the Auth Component. Not sure if its an issue with the way I write the test or an issue in the application itself. Below is the error.
Previous render Next render
------------------------------------------------------
1. useState useState
2. undefined useEffect
and I see this message on the failed tests. "Rendered more hooks than during the previous render."
When I added console statements on the useEffect, I see it's invoked only once.
Below is my Auth component.
const Auth: React.FC<Props> = (props) => {
const state = useConsoleState();
const [problemType, setProblemType] = React.useState<ProblemTypeEnum>("TECH");
React.useEffect(() => {
switch (props.supportType) {
case "limit":
setProblemType("LIMIT");
break;
case "account":
setProblemType("ACCOUNT");
break;
default:
setProblemType("TECH");
break;
}
}, [props.supportType]);
};
const userId = getUserOcid(state.userProfile);
const cimsUserValidationResult = authApiCalls.callCims(!props.csi, props.csi, userId, problemType, state.homeRegionName);
and my test
describe("Auth tests", () => {
beforeEach(() => {
const useEffect = jest.spyOn(React, "useEffect");
useEffect.mockImplementationOnce(f => f());
authApiCalls.callCims = jest.fn().mockReturnValue({
loading: false,
response: {
response: {
ok: true,
},
},
} as QueryResult<ValidationResponse>);
});
const runProblemTypeTest = (url: string, supportType: SupportType) => {
window = Object.create(window);
Object.defineProperty(window, "location", {
value: {
href: url,
},
writable: true
});
mount(
<Auth supportType=. {supportType}>
<div>TestChild</div>
</Authorization>
);
expect(authApiCalls.callCims).toHaveBeenCalledWith(
false,
"1234",
"test",
supportType,
"homeRegion"
);
};
it("check problem type passed to validate when problem type absent in the url", () => {
runProblemTypeTest("http://www.test.com", "tech");
});
});