React Final Form and Material UI, disabling element when specific radio button is selected

Question

New to React Final Form and creating a form with Material UI. I have a date picker disabled by default and want to enable it when a certain radio is selected. I am unsure how to get the form to enable the picker when the 'schedule' radio button is selected and disable it when not.

My Radio group component:

<RadioGroup defaultValue={defaultVal} name={name}>
  {items.map(item => (
    <React.Fragment key={item.value}>
      <FormControlLabel
        name={item.name}
        label={item.label}
        value={item.value}
        control={
          <Field
            name={name}
            type="radio"
            render={({ input: { name, label, value, onChange } }) => (
              <Radio 
                name={name} 
                label={label} 
                value={value} 
                onChange={onChange} 
               />
             )}
           />
          }
        />
      </React.Fragment>
   ))}
</RadioGroup>

Form Component:

const items=[
 {
  name: 'send',
  value: 'immediately',
  label: 'Immediately
 },
 {
  name: 'send',
  value: 'schedule',
  label: 'Schedule
 }
]

<Form onSubmit={onSubmit}>
{({ handleSubmit }) => (
  <form onSubmit={handleSubmit}>
    <Schedule items={items} />
    ...
  </form>
)}
</Form>

My Schedule Component:

<RadioGroup name="options" defaultValue="immediately" items={items}/>
<TimePicker disabled={true} />

Answer 1

You need to get radio field state in Schedule component. Check this link from final form docs: https://codesandbox.io/embed/pyrwplknom?codemirror=1