React Formik bind the external button click with onSubmit function in <Formik>

It appears you have access to the submitForm method as a property of the argument passed to the render function. Simply call that with the button's onClick handler...

render={({ submitForm, ...restOfProps}) => {
    console.log('restOfProps', restOfProps);

    return (
        <React.Fragment>
            <Form>
            Date: <Field name="date" />
            <br />
            Type: <Field name="workoutType" />
            <br />                
            Calories: <Field name="calories" />
            <br />  
            <button type="submit">Submit</button>
            </Form>
            <hr />
            <br />
            <button type="submit" onClick={submitForm}>
            Button Outside Form
            </button>
        </React.Fragment>
    );
}}

This is because the handleSubmit function is never called, replace onClick={() => this.props.onSubmit} with onClick={props.handleSubmit}

edit: since it looks like you need a little more directions, here is an edited version of the linked code sandbox, the correct prop is handleSubmit and you need to destructure it from the props just like you did with values.

https://codesandbox.io/s/qz2jnlp929

Formik's render give you a callback param handleSubmit. Assign this to the <button.

Since your button is not in the form, change its type to <button type="button"... and assign the onClick to onClick={handleSubmit}

Update the render as follow,

render={({ values, handleSubmit }) => {
  return (
    <React.Fragment>
      <Form>
        Date: <Field name="date" />
        <br />
        Type: <Field name="workoutType" />
        <br />
        Calories: <Field name="calories" />
        <br />
        <button type="submit">Submit</button>
      </Form>
      <hr />
      <br />
      <button type="button" onClick={handleSubmit}>
        Button Outside Form
        </button>
    </React.Fragment>
  );
}}