create form using states instead of formik

formik (or any other form framework) doesn't support setting field value programmatically. filter form uses 2 fields that are triggered by clicking a button, and that's the reason there's no other workaround. probably needs a rewrite

pairent_frontend_react/src/pages/IndexPage/index.jsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Scrollbar, Navigation } from 'swiper/core';
 import ISVGIcon from '../../components/UI/Icon/SVGIcon';
-import { Formik, Field, Form } from 'formik';
 
 import styled from 'styled-components';
 import 'swiper/css';
@@ -113,27 +112,26 @@ const FiltersForm = () => {
         per_month: false
     };
 
+    const [ state, setState ] = useState(def_form);
+
     const submitted = (a) => {
         console.log(a);
     }
 
     return (
-        <Formik
-            initialValues={def_form}
-            onSubmit={async (values) => {
-                console.log(values);
-            }}
-            >
-            <Form>
         <Filters>
             <FilterText>Фильтры</FilterText>
             
             <PeriodFilter>
-                        <PeriodButton>
+                <PeriodButton
+                    active={state.per_day}
+                    onClick={() => setState({per_day: !state.per_day})}>
                     <SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' />
                     Посуточно
                 </PeriodButton>
-                        <PeriodButton>
+                <PeriodButton
+                    active={state.per_month}
+                    onClick={() => setState({per_month: !state.per_month})}>
                     <SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
                     Ежемесячно
                 </PeriodButton>
@@ -152,8 +150,6 @@ const FiltersForm = () => {
                 Показать варианты
             </SubmitBtn>
         </Filters>
-            </Form>
-        </Formik>
     );
 }