Connection useFormik and useState is not updating the input field value - react-hooks

Question

Task: I'm trying to change the value of the input field using user-friendly button with. In other words to change the value of the field I don't use the input/select and other tags intended for this.
To be more precise, I'm making an online store with an administrative panel and creating the form to create a category(product categories, such as clothing, electronics and others). And each category has a ParentId(0 - if the first parent or some other value if the child category). I made the catalog button the same is in absolutely every online store and want to link this logic with the creation of a new category.
In the expanded categories menu, select a category, and the parent ID of this category will be shown in the text field. Like, I will select "Clothes and shoes" as the parent category, and a value will be placed in the text field, for example, 8 (the parent ID of the category "Clothes and Shoes")
My approach: I create one state field and change this one when I click on the one of the menu items. Menu items open when I click on the button.
import React, {FC, useState} from "react";
import {Box, Button, Stack, SxProps, TextField} from "#mui/material";
import {useFormik} from "formik";
// own modules
import Catalog from "../catalog/Catalog";
const CreateCategory: FC = (sx?: SxProps) => {
const [parentId, setParentId] = useState<number>(0);
const formik = useFormik({
initialValues: {
name: "",
label: "",
parentId: parentId
},
onSubmit: (values, {setSubmitting}) => {
console.log("values: ", values); // value of the parentId doesn't change on submit
// ...other code...
setSubmitting(false);
}
});
console.log("parentId: ", parentId); // but value of the parentId in the state change properly
return (
<Box
sx={{
display: "grid",
justifyContent: "flex-start",
gridTemplateColumns: "1fr 1fr 1fr 1fr",
gap: "2rem",
"> *": {
gridColumn: "span 2"
},
...sx
}}
component="form"
onSubmit={formik.handleSubmit}
>
<TextField
error={!!(formik.errors.name && formik.touched.name)}
name="name"
onChange={formik.handleChange}
value={formik.values.name}
label="Name (technical - in Latin)"
variant="outlined"
helperText={formik.errors.name}
/>
<TextField
error={!!(formik.errors.label && formik.touched.label)}
name="label"
onChange={formik.handleChange}
value={formik.values.label}
label="label(for users)"
variant="outlined"
helperText={formik.errors.label}
/>
<Stack direction="row" spacing={2}>
<TextField
sx={{flexGrow: 1}}
error={!!(formik.errors.parentId && formik.touched.parentId)}
name="parentId"
value={parentId}
label="parentId"
variant="outlined"
helperText={formik.errors.parentId}
/>
<Catalog onClickOverload={setParentId} /> {/*custom catalog button*/}
<Button
sx={{height: "100%", width: "max-content"}}
onClick={() => setParentId(0)} // you can change this value(0 to 10, example) to check, that initial value(0) doesn't change in the formik values
>
Set parent (0)
</Button>
</Stack>
<Button
sx={{gridColumnStart: 2, gridColumnEnd: 4}}
type="submit"
disabled={formik.isSubmitting}
variant="outlined">
Create
</Button>
</Box>
)
}
export default CreateCategory;
I can't figure out what to try, because the value of the state change but not the parentId value of the formik. I'm at a dead end. Where is my mistake?

Answer 1

There was no need to use useState in this case. It turned out that it was possible to use the following construction:
formik.setFieldValue(nameField, value);
And when you need to change the value in the some custom way - you can use this one.