Предупреждение: необработанная ошибка была перехвачена из submitForm() Ошибка:

Я начинаю проект с реакцией, nextjs и typescript, я пытаюсь отправить форму на свой сервер, но при попытке использовать функцию для вызова функции, сгенерированной с помощью @ urql-codegen, я получаю следующее предупреждение, formik.esm.js:925 Предупреждение. При вызове submitForm() была обнаружена необработанная ошибка. Ошибка: неверный вызов ловушки. Хуки можно вызывать только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

1. У вас могут быть несоответствующие версии React и рендерера (например, React DOM).
2. Возможно, вы нарушаете правила хуков.
3. У вас может быть более одной копии React в одном приложении.

и запрос, но запрос не срабатывает

где может быть моя ошибка я не знаю что делать

Код ниже

   import React from 'react';
import { Formik, Form, Field, FormikHelpers } from 'formik';
import Wrapper from '../components/Wrapper';
import InputField from '../components/InputField';
import { toErrorMap } from '../utils/toErrorMap';
import { useRouter } from 'next/router';
import { createUrqlClient } from '../utils/createUrqlClient';
import { withUrqlClient } from "next-urql"
import { Button, LinearProgress, Grid } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import { TextField } from 'formik-material-ui';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
//import { useLoginUsuarioQuery } from '../generated/graphql';
import { useQuery } from 'urql';
import { useUserByIdQuery } from '../generated/graphql';

const Login: React.FC<{}> = ({ }) => {
  const router = useRouter();
  const classes = useStyles();
  
  const submitForm = ({username,password}) => {
    const [{data}] = useUserByIdQuery({variables:{id:1}});
    console.info(data);
  }    

  return (
    <Grid container component = "main" className = {classes.root}>
      <Grid item xs = {false} sm = {4} md = {7} className = {classes.image}></Grid>
      <Grid item xs = {12} sm = {8} md = {5} component = {Paper} elevation = {6} square >
        <div className = {classes.paper}>
          <Avatar className = {classes.avatar}>
            M
                </Avatar>
          <Typography component = "h1" variant = "h5">
            Ingresar
                </Typography>
          <Formik
            initialValues = {{ username: '', password: '' }}
            onSubmit = {(values) => {submitForm(values)}}
          >
            {({ isSubmitting }) => (
              <Form className = {classes.form}>
                <Field
                  component = {TextField}
                  name = "username"
                  type = "text"
                  label = "username"
                  variant = "outlined"
                  className = {classes.form}
                />
                <br />
                <Field
                  component = {TextField}
                  type = "password"
                  label = "Password"
                  name = "password"
                  variant = "outlined"
                  className = {classes.form}
                />
                {isSubmitting && <LinearProgress />}
                <br />
                <Button
                  variant = "contained"
                  color = "primary"
                  disabled = {isSubmitting}
                  type = "submit"
                  className = {classes.form}

                >
                  Submit
                </Button>
              </Form>
            )}
          </Formik>
        </div>
      </Grid>
    </Grid>


  );

}


export default withUrqlClient(createUrqlClient)(Login)