React Form handler - Formy

Formy.js

import React, { useState } from "react";

const Formy = (props) => {
    const [values, setValues] = useState(props.initialValues);
    const fieldProps = Object.keys(values).reduce((acc, nxt) => {
        acc = {
            ...acc,
            [nxt]: {
                value: values[nxt],
                onChange: (e) => {
                    e.persist();
                    setValues((vals) => ({
                        ...vals,
                        [nxt]: e.target?.value,
                    }));
                },
            },
        };
        return acc;
    }, {});
    const setValue = (field, value) => {
        setValues((vals) => ({
            ...vals,
            [field]: value,
        }));
    };
    const submitForm = (e) => {
        e.preventDefault();
        props.onSubmit(values, setValue);
    };
    return (
        <form onSubmit={submitForm}>
            {props.children(fieldProps, { setValue })}
        </form>
    );
};

export default Formy;

login.js

import React, { useState, Fragment } from "react";
import {
    Text,
    FormControl,
    FormLabel,
    Input,
    Stack,
    Button,
    Checkbox,
    InputGroup,
    InputRightElement,
    IconButton,
} from "@chakra-ui/react";
import { FaEye, FaEyeSlash } from "react-icons/fa";
import Formy from "@/app/formy";
import { signin } from "~/actions/auth/login";
const Login = () => {
    const [show, setShow] = useState(false);
    const [errors, setErrors] = useState();
    const [loading, setLoading] = useState(false);

    const handleLogin = (values, setValue) => {
        signin(values, setLoading)
            .then((m) => console.log("m", m))
            .catch((errs) => {
                setErrors(errs);
                setValue("password", "");
            });
    };
    return (
        <Fragment>
            <Text fontSize="2xl" mb={5} fontWeight="extrabold">
                Sign in to your account
            </Text>
            <Formy
                initialValues={{
                    email: "",
                    password: "",
                    remember: true,
                }}
                onSubmit={handleLogin}
            >
                {({ email, password, remember }, { setValue }) => (
                    <Stack>
                        <FormControl id="email" isRequired>
                            <FormLabel fontSize="sm" fontWeight="bold">
                                Username or email
                            </FormLabel>
                            <Input
                                type="text"
                                placeholder="Enter your username or email"
                                focusBorderColor="brand.400"
                                autoFocus
                                {...email}
                            />
                        </FormControl>
                        <FormControl id="password" isRequired>
                            <FormLabel fontSize="sm" fontWeight="bold">
                                Password
                            </FormLabel>
                            <InputGroup size="md">
                                <Input
                                    type={show ? "text" : "password"}
                                    placeholder="Enter your password"
                                    focusBorderColor="brand.400"
                                    autoComplete="current-password"
                                    {...password}
                                />
                                <InputRightElement width="4.5rem">
                                    <IconButton
                                        variant="ghost"
                                        size="sm"
                                        colorScheme="brand"
                                        h="1.75rem"
                                        onClick={() => setShow((a) => !a)}
                                        icon={show ? <FaEyeSlash /> : <FaEye />}
                                    />
                                </InputRightElement>
                            </InputGroup>
                        </FormControl>
                        <FormControl>
                            <Checkbox
                                defaultChecked
                                colorScheme="brand"
                                isChecked={remember.value}
                                onChange={(e) =>
                                    setValue("remember", e.target.checked)
                                }
                            >
                                Remember me
                            </Checkbox>
                        </FormControl>
                        <Text fontSize="sm" color="red.600" mx={3}>
                            {errors?.email}
                        </Text>
                        <Button
                            type="submit"
                            colorScheme="brand"
                            isLoading={loading}
                            shadow="lg"
                        >
                            Login
                        </Button>
                    </Stack>
                )}
            </Formy>
        </Fragment>
    );
};
export default Login;