Formik - name and ID are not being passed to Field - reactjs

Question

I have a component like below, and when I pass name prop or an ID, it is not being passed to a component and I can check two radio buttons at once. Also ,how can I update a predefined field in initial values with value of a checked radio button?
In React Devtools it looks ok
I get the following error
Warning: Formik called `handleChange`, but you forgot to pass an `id` or `name` attribute to your input:
import React from "react";
import { Heading, OptionCard } from "../..";
import data from "../../../../lang/pl.json";
import { Field } from "formik";
export const Step1 = ({
errors,
touched,
values,
handleChange,
handleBlur,
handleSubmit
}) => {
console.log(values, errors, touched);
return (
<>
<div className="bottomSeparator mb-4">
<Heading variant="h3">{data["global.offer-details"]}</Heading>
</div>
<Heading variant="h5" bsClasses="my-1" info>
{data["global.category-offer"]}
</Heading>
<div className="row">
<div role="group" className="col-12">
<div className="col-xs-6 col-lg-3">
<Field
type="radio"
component={OptionCard}
value={data["create.blade.text-1"]}
name={values.kategoria}
onChange={handleChange}
id={data["create.blade.text-1"]}
name={data["create.blade.text-1"]}
/>
</div>
<div className="col-xs-6 col-lg-3">
<Field
type="radio"
component={OptionCard}
value={data["create.blade.text-2"]}
name={values.kategoria}
onChange={handleChange}
id={data["create.blade.text-2"]}
name={data["create.blade.text-2"]}
/>
</div>
</div>
<div className="row mb-3">
<div className="col-md-12 col-sm-12 col-xs-12">
<div className="form-group">
<label>
{data["global.category-offer"]}{" "}
<span className="red">
{data["global.required"]}
</span>
</label>
<select
id="type"
name="type"
className="d-block"
required="yes"
>
<option value="course">
{data["create.blade.text-1"]}
</option>
<option value="private_lesson">
{data["create.blade.text-2"]}
</option>
</select>
</div>
</div>
</div>
</div>
</>
);
};
thanks

Answer 1

You have values formik variable.
You defined name as name={values.kategoria} (example). When page renders, you have name={values.kategoria} equals to "".
You have also doubled name props, make always according to your data variable as you import it, as you did here name={data["create.blade.text-1"]}
Also good thing to do:
You define initialValues and assign your data to your initialValues. After, you are using {values} variable inside render component, example here: