How can i radio button checked and update the value using graphql api in React js?

I have created an scenario for multiple add field in react js. In that i havve added radio button for selecting either one option and other one goes disabled. when i have update i didn't get checked value form radio button where i have get value from api

const [disabledField, setDisabledField] = useState<string>("weightedAuction");
const addEmptyTargetFields = () => {
  setTarget((previousTarget) => [...previousTarget, target.length + 1]);
};
const removeTarget = (index: number) => {
  setTarget([...target.slice(0, index), ...target.slice(index + 1)]);
};

i am taking sample static data for checkbox in this i have checked if bidFloor has value than checked or weightedAuction has value than it was checked

let bidrule = {
  targets: [{ bidFloor: 10, weightedAuction: null }],
};

this is my view code for radio button

{target.map((e, i) => {
        return (
          <div key={i}>
            <FlexWrapper>
              <BidderSelectWrapper>
                <Controller
                  as={Select}
                  control={control}
                  name={`targets[${i}].networkId`}
                  placeholder="Bidder"
                  options={networkOptions}
                  optionComponent={NetworkOption}
                  // defaultValue={defaultValueSelect[i]}
                  value={networkOptions.find(({ value: value }) => value === "")}
                />
                {/* <Controller as={BidderSelect} control={control} name={`targets[${i}].networkId`} /> */}
              </BidderSelectWrapper>
              <Separator width="48px" />
              <FlexColumnWrapper>
                <FlexWrapper align="center">
                  <RadioButton
                    name={`target_value_${i}`}
                    value={"bitFloor"}
                    checked={bidrule.targets[i].bidFloor}
                    onClick={() => {
                      setDisabledField("weightedAuction");
                      bidrule.targets[i].radioChecked = "weightedAuction";
                    }}
                  />
                  <Separator width="24px" />
                  <Textbox
                    placeholder="Bid Floor"
                    formRef={register}
                    name={`targets[${i}].bidFloor`}
                    isDisabled={disabledField === `bidFloor`}
                    value={bidrule.targets[i]?.bidFloor}
                  />
                </FlexWrapper>
                <HorizontalSeparator height="24px" />
                <FlexWrapper align="center">
                  <RadioButton
                    name={`target_value_${i}`}
                    value={"weightedAuction"}
                    checked={bidrule.targets[i].weightedAuction}
                    onClick={() => {
                      setDisabledField("bidFloor");
                      bidrule.targets[i].radioChecked = "weightedAuction";
                    }}
                  />
                  <Separator width="24px" />
                  <SliderWrapper>
                    <Controller
                      as={SliderComponent}
                      control={control}
                      title="Weighted Auction"
                      min={0}
                      max={100}
                      name={`targets[${i}].weightedAuction`}
                      isDisabled={disabledField === "weightedAuction"}
                      defaultValue={bidrule.targets[i]?.weightedAuction}
                    />
                  </SliderWrapper>
                </FlexWrapper>
              </FlexColumnWrapper>
              {i > 0 && <StyledCross onClick={() => removeTarget(i)} />}
            </FlexWrapper>
          </div>
        );
      })}
      <LinkButton onClick={() => addEmptyTargetFields()}>Add More</LinkButton>

this is my radio button call code

interface CheckboxProps {
 name?: string;
 value?: string;
 checked?: boolean;
 textLabel?: string;
 onChange?: (e: React.ChangeEvent) => void;
 onClick?: (e: React.MouseEvent) => void;
}

const RadioButtonComponent: React.FC<CheckboxProps> = (props) => {
const { textLabel, onChange, name, value, checked, onClick } = props;

return (
 <Wrapper>
  <Input
    type="radio"
    name={name}
    value={value}
    checked={checked}
    aria-checked={checked}
    onChange={onChange}
    onClick={onClick}
  />
  <Fill />
  <div style={{ marginLeft: "25px" }}>{textLabel}</div>
 </Wrapper>
);