Почему не работают initialValues (formik, ant design)?

Question

[vovashaplin]

Причем в console.log выдает правильные query параметры
Использую enableReinitialize: true, данные попадают в начальные значения, но только после нажатия submit'a, в самих инпутах и селектах не отображаются.

import styled from 'styled-components';
import { useFormik } from 'formik';
import { Form, Select, Button, Input } from 'antd';
import { useRouter } from 'next/router';

const { Option } = Select;


const prices = ['500', '1000', '5000', '10000', '15000', '20000', '100000'];

const Index = () => {

  const { query } = useRouter();

  console.log(query.brand);
  // console.log(query.email);

  // const initialValues = {
  //   brand: `${query.brand}` || '',
  //   model: `${query.model}` || '',
  //   min: '',
  //   max: '',
  //   email: query.email
  // }

  const formik = useFormik({
    initialValues: {
      brand: `${query.brand}` || '',
      model: `${query.model}` || '',
      min: '',
      max: '',
      email: query.email
    },
    enableReinitialize: true,
    onSubmit: (values, { setSubmitting, resetForm }) => {
      // authLogin(values.username, values.password)
      console.log(values)
      setSubmitting(true)
      setTimeout(() => {
        // resetForm()  
        setSubmitting(false)
        // history.push('/')
      }, 1000)
    }
  });

  const { handleSubmit, handleChange, isSubmitting, values } = formik;

  return (
    <StyledIndex>
      <Form onFinish={handleSubmit} values={values}>
        <StyledForm>
          <StyledFormItem>
            <Form.Item
              name="brand"
              initialValue={values.brand}
            >
              <Select
                id="index__brand"
                name="brand"
                placeholder="Select brand"
                value={values.brand}
                onChange={handleChange}
              >
                <Option value="All">All brands</Option>
                <Option value="Apple">Apple</Option>
                <Option value="Samsung">Samsung</Option>
                <Option value="HTC">HTC</Option>
                <Option value="Lenovo">Lenovo</Option>
                <Option value="Nokia">Nokia</Option>
              </Select>
            </Form.Item>
          </StyledFormItem>
          <StyledFormItem>
            <Form.Item
              name="email"
              hasFeedback
              initialValue={values.email}
            >
              <Input
                id="log__email"
                name="email"
                placeholder="E-mail"
                value={values.email}
                onChange={handleChange}
              />
            </Form.Item>
          </StyledFormItem>
          <StyledFormItem>
            <Form.Item
              name="model"
              initialValue={values.model}
            >
              <Select
                id="index__model"
                name="model"
                onChange={handleChange}
                value={values.model}
                placeholder="Select model"
              >
                <Option value="Apple">Apple</Option>
                <Option value="Samsung">Samsung</Option>
                <Option value="HTC">HTC</Option>
                <Option value="Lenovo">Lenovo</Option>
                <Option value="Nokia">Nokia</Option>
              </Select>
            </Form.Item>
          </StyledFormItem>
          <StyledFormItem>
            <Form.Item
              name="min"
              initialValue={values.min}
            >
              <Select
                id="index__min"
                name="min"
                onChange={handleChange}
                value={values.min}
                placeholder="Select min"
              >
                {prices.map((price, index) => (
                  <Option key={`key__${price}__${index}`} value={price}>{price}</Option>
                ))}
              </Select>
            </Form.Item>
          </StyledFormItem>
          <StyledFormItem>
            <Form.Item
              name="max"
              initialValue={values.max}
            >
              <Select
                id="index__max"
                name="max"
                onChange={handleChange}
                value={values.max}
                placeholder="Select max"
              >
                {prices.map((price, index) => (
                  <Option key={`key_${price}_${index}`} value={price}>{price}</Option>
                ))}
              </Select>
            </Form.Item>
          </StyledFormItem>
        </StyledForm>
        <Button
          type="primary"
          htmlType="submit"
          disabled={isSubmitting}
        >Sumbit</Button>
      </Form>
    </StyledIndex>
  );
}

export default Index;

const StyledIndex = styled.div`
  border: 1px solid black;
  border-radius: 10px;
  max-width: 600px;
  padding: 50px 24px 24px 24px;
  margin: 20px auto;
  button {
    display: block;
    margin: 0 auto;
    width: 200px;
  }
`;

const StyledForm = styled.div`
  display: flex;  
  justify-content: space-around;
  flex-wrap: wrap;
`;

const StyledFormItem = styled.div`
  flex: 0 1 200px;
`;