react 点击按钮渲染不同的时间控件

  const optionsWithDisabled = [
    { label: "月度", value: "1" },
    { label: "季度", value: "2" },
    { label: "年度", value: "3" },
  ];
    const [valueRadio, setValueRadio] = useState('1');
  const onChangeRadio = ({ target: { value } }: RadioChangeEvent) => {
    console.log('radio4 checked', value);
    setValueRadio(value);

  };
  
    const rangePickerFn=(value)=>{
    switch (value) {
        case '1':
            return(   <RangePicker picker="month"  size="small"    onChange={changePicker}  />)
        case '2':
            return (
                <RangePicker picker="quarter"  size="small"   onChange={changePicker}/>
            )
        case '3':
            return (  <RangePicker picker="year"  size="small"  onChange={changePicker}/>)
        default: 
        return ''
    
    }
  }
<Space>
        
        <Radio.Group
          options={optionsWithDisabled}
          value={valueRadio}
          optionType="button"
          buttonStyle="solid"
          size="small"
          onChange={onChangeRadio}
        />
      <div>  {rangePickerFn(valueRadio)}</div>
     
       
      
      </Space>