how to select form value and put condition accordingly field array in redux form

[gaurangPhpdots]

I am using redux form basic working of this example, i want to create form where we can add multiple fields multiple times. i'm able to do so, but i'm facing issue where i want to add condition on radio button, where fields will be displayed based on condition, but i'm unable to do so, can anyone please help me out? i want to display conditional field based on selectedCountry variable with radio button.

const renderField = ({ input, label, type, meta: { touched, error } }) => (

<TextField
{...input}
className="mt-16"
label={label}
type={type}
variant="outlined"
fullWidth
/>
{touched && error && <span style={{ color: "red" }}>{error}}

);

const radioButtonCountry = ({ input, meta: { touched, error }, ...rest }) => (
<FormControl style={{ display: "flex" }}>
<RadioGroup
style={{ flexDirection: "initial" }}
{...input}
{...rest}
value={input.value}
onChange={(event, value) => input.onChange(value)}
>
<FormControlLabel
labelPlacement="start"
value="Indian"
control={}
label="Indian"
/>

  <FormControlLabel
    labelPlacement="start"
    value="NonIndian"
    control={<Radio />}
    label="Non Indian"
  />
</RadioGroup>
{touched && error && <span style={{ color: "red" }}>{error}</span>}

);

let selectedCountry;

const renderMembers = ({
data,
fields,
meta: { touched, error, submitFailed },
}) => (

fields.push({})} > Add New Company {(touched || submitFailed) && error && ( {error} )}

{fields.map((company, index) => (
  <Grid container spacing={3} key={index} className="mt-16">

    <Grid item xs={12} style={{ padding: 0, paddingInline: "12px" }}>
      <Field
        name={`${company}.country`}
        component={radioButtonCountry}
        onChange={(e) => {
          console.log("onchange", e);
          selectedCountry = e;
        }}
      >
        <Radio value="Indian" label="Indian" />
        <Radio value="NonIndian" label="Non Indian" />
      </Field>
    </Grid>

   {selectedCountry === "Indian" && (
      <>
        <Grid item xs={4} style={{ padding: 0, paddingInline: "12px" }}>
          <Field
            name={`${company}.panNo`}
            type="text"
            component={renderField}
            label="Pan No."
          />
        </Grid>
        <Grid item xs={4} style={{ padding: 0, paddingInline: "12px" }}>
          <Field
            name={`${company}.firmType`}
            type="text"
            component={renderField}
            label="Firm Type"
          />
        </Grid>         
                              
      </>
    )}

    {selectedCountry === "NonIndian" && (
      <>
        <Grid item xs={4} style={{ padding: 0, paddingInline: "12px" }}>
          <Field
            name={`${company}.regNum`}
            type="text"
            component={renderField}
            label="Registration Number"
          />
        </Grid>

        <Grid item xs={4} style={{ padding: 0, paddingInline: "12px" }}>
          <Field
            name={`${company}.taxRegNum`}
            type="text"
            component={renderField}
            label="Tax Registration Number"
          />
        </Grid>
      </>
    )}
  </Grid>
))}

);

const FieldArraysForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props;

return (

<div style={{ fontSize: "12pt" }}>Company Details


);
};

export default reduxForm({
form: "fieldArrays", // a unique identifier for this form
initialValues: {
companys: [""],
},
validate,
})(FieldArraysForm);