formik removing class at top level

import React from 'react';
import {Formik} from "formik";

class FormikState {
    public input1: string;
    public input2: string;
    public nested: FormikNestedState;

    constructor() {
        this.input1 = "";
        this.input2 = "";
        this.nested = new FormikNestedState();
    }

    isInput1Empty() {
        return this.input1 === "";
    }
}

class FormikNestedState {
    public input3: string;

    constructor() {
        this.input3 = "";
    }

    isInput3Empty() {
        return this.input3 === "";
    }
}

export default class FormikStateClassExample extends React.Component {
    render() {
        return (
            <Formik
                initialValues={new FormikState()}
                onSubmit={console.log}>
                {(formik) => {
                    console.log(formik.values);
                    return (
                        <div>
                            <input name="input1" onChange={formik.handleChange} onBlur={formik.handleBlur}/>
                            <input name="input2" onChange={formik.handleChange} onBlur={formik.handleBlur}/>
                            <input name="nested.input3" onChange={formik.handleChange} onBlur={formik.handleBlur}/>
                            <pre>
                            {JSON.stringify(formik.values)}
                                {formik.values.isInput1Empty()}
                                {formik.values.nested.isInput3Empty()}
                        </pre>
                        </div>
                    )
                }}
            </Formik>
        )
    }
}