Form.jsx

import React, { createContext, useState } from 'react';

export const FormContext = createContext();

const Form = ({ handleSubmit, children, submitButtonText }) => {
  const [values, setValues] = useState({});

  const setValue = ({ name, value }) => {
    setValues(values => ({
      ...values,
      [name]: value,
    }));
  };

  return (
    <FormContext.Provider value={{ values, setValue }}>
      <form
        onSubmit={e => {
          e.preventDefault();
          handleSubmit(values);
        }}
      >
        {children}
        <button type="submit">{submitButtonText}</button>
      </form>
    </FormContext.Provider>
  );
};

export default Form;