Higher Order Components, Props with Formik & GatsbyJS - reactjs

Question

I am trying to create a Formik form in a Gatsby site using the withFormik higher order component (rather than use a render prop).
Here is a simplified version of my code:
import React from 'react'
import { withFormik } from 'formik'
const TestPage = ({ handleChange, values }) => (
<div>
<input
type="email"
name="email"
placeholder="Email"
onChange={handleChange}
value={values.email}
/>
</div>
)
const FormikTest = withFormik({
mapPropsToValues() {
return {
email: 'test#test.com',
}
},
})
export default FormikTest(TestPage)
So far, everything works just as a I want. However, I am hitting a problem when it comes to setting up a conditional argument for the email field in the mapPropsToValues object. You can see what I am trying to do by watching about 1 minute of this tutorial (it's set to the right starting time): https://www.youtube.com/watch?v=yNiJkjEwmpw&feature=youtu.be&t=717
The problem is that I can't figure out how I would send props to the mapPropsToValues using Gatsby. I don't have access to render like in that tutorial.
In other words, in Create React App, you can do something like the following:
const FormikTest = withFormik({
mapPropsToValues({ email }) {
return {
email: email || '',
}
},
})(TestPage)
render(<FormikTest email="test#test.com />, document.getElementById('#root'))
But I don't have access to render in Gatsby or a <FormikTest /> component.
Any idea, therefore, how I could pass in props to mapPropsToValues so that I could conditionally set initial values for the email form using Gatsby?
Thanks.
UPDATE
I have created a simple Codesandbox version which has just one page using Formik. Here is the link: https://codesandbox.io/s/gatsby-starter-default-270gs?fontsize=14
And here is the code for that page:
import React from "react"
import { withFormik } from "formik"
const IndexPage = ({ handleChange, values }) => (
<div>
<input
type="email"
name="email"
placeholder="Email"
onChange={handleChange}
value={values.email}
/>
</div>
)
const FormikTest = withFormik({
mapPropsToValues() {
return {
email: "",
}
},
})
export default FormikTest(IndexPage)

Answer 1

In that tutorial, he's defining everything in one file hence the reason he's using render (it's what react does under the hood when you import components). In your case, the TestPage component would be used as a child in another component like:
render(){
return (<TestPage email = "test#example.com"/>);
}
mapPropsToValues would get the props passed in as a parameter and "email" would be a member of those props

Answer 2

You have access to any props passed down to a component in mapPropsToValues. Try passing your base component through withFormik straight away while returning a function as an export - that will allow you to set any desired props.
const FormikTest = withFormik({
mapPropsToValues(props) {
console.log(props) // { rad: "yas" }
return {
email: "",
}
},
})(IndexPage)
export default () => <FormikTest rad="yas" />