Nested Form.item ant design in Radio and input

Question

How to get values input in Form.item using Radio button AntDesign

Here is document code

import { Radio, Input, Space } from 'antd';

class App extends React.Component {
  state = {
    value: 1,
  };

  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value,
    });
  };

  render() {
    const { value } = this.state;
    return (
      <Radio.Group onChange={this.onChange} value={value}>
        <Space direction="vertical">
          <Radio value={4}>
            More...
            {value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
          </Radio>
        </Space>
      </Radio.Group>
    );
  }
}

ReactDOM.render(<App />, mountNode);

but I want to use Radio with input in Form.item Here is what

  <Form.Item name={name} rules={[{ required: true }]} label={label} className={className}>
      <Radio.Group value={value} onChange={onChange}>
        <Space direction="vertical">
          {(radioValue as any).map((item: any) => (
            <Radio key={item.value} value={item.value}>
              {item.title}
              <Form.Item name={'other'} label={' '}>
                <Input style={{ width: 100, marginLeft: 10 }} />
              </Form.Item>
            </Radio>
          ))}
        </Space>
      </Radio.Group>
    </Form.Item>

the problem is as you see it Form.item inside Form.item and the it's enter a new line element wish I want input and radio button at same line. I do this way because I want to get value in onFinish I'm not sure is their any better way to get input value in <Radio value={4}> without using 2 nested Form.item ?