How can I put a counter up in my form and add data in the databases using reactjs ,formik and axios

I ‘m new in react js I put a counter up in my form I have problem to put the result of counter with the form result in the databases I use for my Api mongodb and spring boot

Count up function

export default function Index(props)  {
    /* Server State Handling */

    const [count, setCount] = useState(0);
    const [delay, setDelay] = useState(1000);

    useInterval(() => setCount((c) => c + 1), delay);

    useEffect(() => {
        if (delay === null) alert(`Count ${count}`);
    }, [count, delay]);

    function useInterval(callback, delay) {
        const savedCallback = useRef();

        useEffect(() => {
            savedCallback.current = callback;
        });

        useEffect(() => {
            let id;
            if (delay) {
                id = setInterval(savedCallback.current, delay);
            }
            return () => clearInterval(id);
        }, [delay]);
    }
const [serverState, setServerState] = useState();
    const handleServerResponse = (ok, msg) => {
        setServerState({ok, msg});
    };

Function of submitting data

    const handleOnSubmit = (values, actions) => {
        axios.post( "/consultations", values,
        )
            .then(response => {
                props.history.push("/listcons");
                actions.setSubmitting(false);
                actions.resetForm();
                handleServerResponse(true, "Thanks!");

                alert("Consultation enregister avec succer");

            })
            .catch(error => {
                actions.setSubmitting(false);
                handleServerResponse(false, error.response.data.error);
            });

My form with the counter up

I have problem here when I submitted my form in my databases the count value is always 0 (the initial value) how can I resolve this problem what is the problem of my code

return (
        <div className="container ">
            <div className="card-body bg-white">
            <Formik
                initialValues={{count:0,titre: ""}}
                onSubmit={handleOnSubmit}
                validationSchema={formSchema}
            >
                {({ isSubmitting }) => (

                    <Form id="fs-frm" noValidate >
   <div style={{textAlign: 'center'}}>
                            <h3>Count</h3>
                            <h2> {count}</h2>
                        </div>
                        <div className="form-group" >
                        <label htmlFor="titre">Titre</label>
                        <Field id="titre" name="titre" className="form-control" />
                        <ErrorMessage name="titre" className="errorMsg" component="p" />
                        </div>
                        <Card.Footer style={{ "textAlign": "right" }}>
                        <button type="submit" className="btn btn-primary"  disabled={isSubmitting}>
                            Submit
                        </button>
                            </Card.Footer>
                        {serverState && (
                            <p className={!serverState.ok ? "errorMsg" : ""}>
                                {serverState.msg}
                            </p>
                        )}
                    </Form>
                )}
            </Formik>
        </div>
        </div>
    );
};