ReactのFormikを使用し 配列でコンポーネント（radiobutton）を生成したい

解決したいこと

ReactのFormikを使用し
配列でコンポーネント（radiobutton）を生成したい

発生している問題・エラー

配列でコンポーネントは生成されるのですが、
ラジオボタンをクリックして選択することができない

該当するソースコード

＜jsファイル＞
import React from 'react';
import { render } from "react-dom";
import { withFormik } from "formik";
import * as yup from "yup";
const MyInnerForm = props => {
const {
values,
touched,
errors,
dirty,
isSubmitting,
handleChange,
handleBlur,
handleSubmit,
handleReset,
setFieldValue
} = props;
const RadioSelect = [
{name: "bonus", label: "指定なし", value: "a",id:"rdobonus1"},
{name: "bonus", label: "男", value: "b",id:"rdobonus2"},
{name: "bonus", label: "女", value: "c",id:"rdobonus3"},
]
return (

);
};
export const RadioButtons = withFormik({
mapPropsToValues: () => ({ email: "", test: "" }),
validationSchema: yup.object().shape({
email: yup.string()
.email("Invalid email address")
.required("Email is required!")
}),
handleSubmit: (values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 1000);
},
displayName: "BasicForm" // helps with React DevTools
})(MyInnerForm);

＜CSS＞

/* Radio Buttons
========================================================================== */
[type="radio"]:not(:checked),
[type="radio"]:checked {
position: absolute;
left: -9999px;
opacity: 0;
}

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
position: relative;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
font-size: 1rem;
transition: .28s ease;
/* webkit (konqueror) browsers */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

[type="radio"] + label:before,
[type="radio"] + label:after {
content: '';
position: absolute;
left: 0;
top: 0;
margin: 4px;
width: 16px;
height: 16px;
z-index: 0;
transition: .28s ease;
}

/* Unchecked styles */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:before,
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
border-radius: 50%;
}

[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after {
border: 2px solid #5a5a5a;
}

[type="radio"]:not(:checked) + label:after {
z-index: -1;
-webkit-transform: scale(0);
transform: scale(0);
}

/* Checked styles */
[type="radio"]:checked + label:before {
border: 2px solid transparent;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
border: 2px solid #26a69a;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after {
background-color: #26a69a;
z-index: 0;
}

[type="radio"]:checked + label:after {
-webkit-transform: scale(1.02);
transform: scale(1.02);
}

/* Radio With gap */
[type="radio"].with-gap:checked + label:after {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

/* Focused styles */
[type="radio"].tabbed:focus + label:before {
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Disabled Radio With gap */
[type="radio"].with-gap:disabled:checked + label:before {
border: 2px solid rgba(0, 0, 0, 0.26);
}

[type="radio"].with-gap:disabled:checked + label:after {
border: none;
background-color: rgba(0, 0, 0, 0.26);
}

/* Disabled style */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.26);
}

[type="radio"]:disabled + label {
color: rgba(0, 0, 0, 0.26);
}

[type="radio"]:disabled:not(:checked) + label:before {
border-color: rgba(0, 0, 0, 0.26);
}

[type="radio"]:disabled:checked + label:after {
background-color: rgba(0, 0, 0, 0.26);
border-color: #BDBDBD;
}

自分で試したこと

mapメソッドを使用せずにinputタグの部分をべた書きすると問題なく動きますが、mapメソッドを使用すると、ラジオボタンの選択ができなくて困っております。formikやreactのフォームを使用しようかとも思いましたが、cssを適用したい関係でinputタグを使用しています。

始めたばかりで理解の追いついていない部分も多くお恥ずかしいのですが、ご教授いただければ幸いです。