text: import {Box, Button, TextField} from "@mui/material";
  import {useFormik} from "formik";
  import * as yup from "yup";
  import React from "react";
  
  const style = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: 400,
    bgcolor: "background.paper",
    border: "2px solid #000",
    boxShadow: 24,
    p: 4,
  };
  
  const validationSchema = yup.object({
    email: yup
      .string("Enter your email")
      .email("Enter a valid email")
      .required("Email is required"),
    password: yup
      .string("Enter your password")
      .min(6, "Password should be of minimum 6 characters length")
      .required("Password is required"),
  });
  
  export const LoginForm = (props) => {
    const formik = useFormik({
      initialValues: props.defaultValues,
      validationSchema: validationSchema,
      onSubmit: (values) => {
        props.onSubmit(values);
      }
    });
  
    const handleChange = (event) => {
      formik.handleChange(event);
      const value = event.target.value;
      props.setForm({
        ...props.form,
        [event.target.name]: value
      });
    };
    return (
      <Box sx={style}>
        <h1>
                  Login
        </h1>
        <div>
          <form onSubmit={formik.handleSubmit}>
            <TextField
              fullWidth
              id="email"
              name="email"
              label="email"
              value={formik.values.email}
              onChange={handleChange}
              error={formik.touched.email && Boolean(formik.errors.email)}
              helperText={formik.touched.email && formik.errors.email}
            />
            <TextField
              fullWidth
              id="password"
              name="password"
              label="password"
              type="password"
              value={formik.values.password}
              onChange={handleChange}
              error={formik.touched.password && Boolean(formik.errors.password)}
              helperText={formik.touched.password && formik.errors.password}
            />
            <Button color="primary" variant="contained" fullWidth type="submit">Submit</Button>
          </form>
        </div>
        <p>
                  No account? Sign up <a href='./signup'> here </a>
        </p>
      </Box>
    );
  };