onSubmit validation toggles between true and false in the validationResults when it shouldn't

Question

It seems to record the entry fields correctly but when submitting, it returns true and then false upon attempting to submit again. Screenshot showcasing the issue.

I changed the onSubmit to

({ value }) => console.log('Submit', value)

and got the following results, and it seems that when it works as expected it actually returns the value from the form fields but when it fails validation no value from the fields are passed.

Is there something wrong with the way I'm handling states or is this an issue with the form component?

const ResponsiveGrid: VFC<Props> = ({children, areas, ...props}) => {
    const arrangement = React.useContext(ResponsiveContext) as "xsmall" | "small" | "medium" | "middle";
    const row = React.useContext(ResponsiveContext) as "xsmall" | "small" | "medium" | "middle";
    const column = React.useContext(ResponsiveContext) as "xsmall" | "small" | "medium" | "middle";
    return (
        <Box align={"center"}>
            <Grid areas={areas[arrangement]} rows={LeadGeneratorGridRowSettings[row]}
                  columns={LeadGeneratorGridColSettings[column]} {...props}>
                {children}
            </Grid>
        </Box>
    );
};


export default function CardDealer() {
    const [userInfo, setUserInfo] = React.useState<UserInfo>({env: "101", money: "$9", first: "",last: "",phone: "",email: "",wagers: "",zip: ""});
    const [valid, setValid] = React.useState(false);
    let environments = ["101", "102"];
    let wagers = ["$9", "$99", "999", "$9,999", "99,999", "999,999"]


    async function changeHandler(key: string, value: string) {
        await setUserInfo(
            {
                ...userInfo,
                [key]: value
            }
        )
    }

    function submitHandler() {
        if (valid)
            console.log(userInfo)
        else
            console.log("It isn't real")
    }

    const listMapper = fieldNames.map((field, index) =>
        <FormField key={index} label={field.label} name={field.name} placeholder={"type here"}
                   onChange={(event) => changeHandler(event.target.name, event.target.value)}
                   validate={[{regexp: field.validation.regexp, message: field.validation.message}, field.validation.func]}/>
    )


    return (
        <ResponsiveContext.Consumer>
            {size => (
                <ResponsiveGrid responsive={true} gap="medium" areas={ResponsiveGridArrangementSettings}>
                    <Box gridArea="one">
                        <Heading level={"4"} alignSelf={"center"}>
                            Environment
                        </Heading>
                        <Select options={environments} value={userInfo.env}
                                onChange={({option}) => changeHandler("env", option)}/>
                    </Box>
                    <Box gridArea="two">
                        <Heading level={"4"} alignSelf={"center"}>
                            Lead Bucket
                        </Heading>
                        <Select options={wagers} value={userInfo.bucket}
                                onChange={({option}) => changeHandler("bucket", option)}/>
                    </Box>
                    <Box gridArea="three">
                        <Form value={userInfo} validate={"submit"} onSubmit={() => submitHandler}
                              onValidate={(validationResults) => {
                                  console.log('validationResults = ', validationResults);
                                  console.log('userInfo = ', userInfo)
                                  setValid(validationResults.valid);
                              }}>
                            {listMapper}
                            <Box alignContent={"center"}>
                                <Button alignSelf={"center"} type={"submit"} primary
                                        style={{"padding": "15px", borderRadius: "10px"}}>
                                    Generate Leads
                                </Button>
                            </Box>
                        </Form>

                    </Box>
                </ResponsiveGrid>
            )}
        </ResponsiveContext.Consumer>
    )
}