How to get fresh values ​​on click on a component?

Question

React

I'm in pain for a few days. How to get new values.color without onSubmit on radio click?

const AddToCartForm = ({id, colors, sizes}) => {

    return (
    <Formik
        initialValues={{ color: colors[0], size: sizes[0] }}
        onSubmit={(values) => console.log("kek")}>
        {({
            values,
            handleSubmit,
            handleChange
        }) => <Form className="form" onSubmit={handleSubmit}>
            <div className="formBlock">
                <span className="dataPointer">
                {colors.length > 1 ? "Select a color" : <>Color<span style={{paddingLeft: "20px"}} >{colors[0]}</span></> }
                </span>
                {colors.length > 1 && colors.map((color, index) => <div key={color}>
                    <Field
                        type="radio"
                        name="color"
                        id={`${color}${index}`}
                        value={color}
                        className="defaultRadio"
                    />
                    <label onClick={() => console.log(values)} className="customRadio" htmlFor={`${color}${index}`}>
                        <span className={`${colorize(color)} customRadio`}>{color}</span>
                    </label>
                    </div>
                )}
            </div>
            <div className="formBlock select-block">
                <span className="dataPointer">Select a size</span>
                <Field className="size-select" name="size" as="select">
                    {sizes.map(size => <option
                        key={size}
                        value={size}
                        className="size-option"
                    >
                        {size}
                    </option>)}
                </Field>
            </div>
            <button className="submit" type="submit">Add to Cart</button>
        </Form>
    }
    </Formik>
    )
}