When Testing react component I get an Invalid hook call error

Question

I am trying to test Login page of my app.It has 2 input field for email and password. My login page looks like this (part of login page related with error):

const Login = (props) => {
  const { t } = useTranslation();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [authStatus, setAuthStatus] = useState(false);

  const onChangeEmail = (e) => {
    const email = e.target.value;
    setEmail(email);
  };

  const onChangePassword = (e) => {
    const password = e.target.value;
    setPassword(password);
  };

  const processResponse = (response) => {
    const currentStatus = response.status;
    const data = response.data;
    return Promise.all([currentStatus, data]).then((res) => ({
      currentStatus: res[0],
      data: res[1],
    }));
  };
.......//some other methods
}

Part where ı use t :

<div id="user-password-container" className="flex flex-col">
            <label htmlFor="password">{t("text.password")}</label>
            <div className="flex pl-1 items-center space-x-2 w-full h-8 border-2 focus-within:border-primary-900 rounded-lg bg-white">
            </div>
          </div>

I wrote some test to test my onChange methods :

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { shallow, configure } from "enzyme";
//import { shallow } from "enzyme";
import Login from "../login/Login";

configure({ adapter: new Adapter() });
test("message box", () => {});


describe("Login form should be in the document", () => {
  let wrapper;

  test("username check", () => {
    wrapper = shallow(<Login />);

    wrapper.find('input[type="email"]').simulate("change", {
      target: { name: "email", value: "[email protected]" },
    });

    expect(wrapper.state("email")).toEqual("[email protected]");
  });

  it("password check", () => {
    wrapper = shallow(<Login />);

    wrapper.find('input[type="password"]').simulate("change", {
      target: { name: "password", value: "samplepassword" },
    });

    expect(wrapper.state("password")).toEqual("samplepassword");
  });

});

However When I run tests I get an error called Invalid hook calls : Error

Login form should be in the document › login check with wrong data

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

  11 |
  12 | const Login = (props) => {
> 13 |   const { t } = useTranslation();
     |                 ^
  14 |   const [email, setEmail] = useState("");
  15 |   const [password, setPassword] = useState("");
  16 |   const [authStatus, setAuthStatus] = useState(false);

  at resolveDispatcher (node_modules/react/cjs/react.development.js:1476:13)
  at useContext (node_modules/react/cjs/react.development.js:1484:20)
  at useTranslation (node_modules/react-i18next/dist/commonjs/useTranslation.js:28:36)
  at Login (src/app/login/Login.js:13:17)
  at ReactShallowRenderer.render (../../../../node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:829:32)
  at renderElement (../../../../node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:643:26)
  at fn (../../../../node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:707:46)
  at withSetStateAllowed (../../../../node_modules/enzyme-adapter-utils/src/Utils.js:100:18)
  at Object.render (../../../../node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:707:20)
  at new ShallowWrapper (../../../../node_modules/enzyme/src/ShallowWrapper.js:411:22)
  at shallow (../../../../node_modules/enzyme/src/shallow.js:10:10)
  at Object.<anonymous> (src/app/__tests__/Login.test.js:75:15)

How can I fix this issue ?