React - render class component when checkbox is selected

I have a select dropdown that when selected renders a checkbox group using <FieldArray> from formik

  <FieldArray
    name="fields"
    render={arrayHelpers => (
      <div>
        {fields.map(field => (
          <div key={field.name}>
            <label>
              <input
                name="fields"
                type="checkbox"
                value={field.name}
                onChange={e => {
                  if (e.target.checked) arrayHelpers.push(field.name);
                  else {
                    const idx = fields.indexOf(field.name);
                    arrayHelpers.remove(idx);
                  }
                }}
              />{" "}
              {field.name}
            </label>
          </div>
        ))}
      </div>
    )}
  />

So in the onChange method I need for each checkbox that is selected to render a class component that has additional input fields that are tied to the field name. For example, the size and length options need to chosen for each checkbox that is selected.

        class FieldInputs extends React.Component {
          constructor(props) {
            super(props);

            this.state = {
              lengthType: "",
              size: [],
            };

            this.lengthTypeChange = this.lengthTypeChange.bind(this);
            this.onSizeChange = this.onSizeChange.bind(this);
          }

      lengthTypeChange = lengthType => {
        //handle change method for lengthType
        this.setState({ lengthType });
        console.log("LengthType selected: ", lengthType);
      };

  onSizeChange = e => {
    this.setState({ [e.target.name]: e.target.value });
    console.log([e.target.value]);
  };
          render() {
            return (
              <div>
                <h2>
                  {" "}
                  These are the input fields for each field name checkbox selected.{" "}
                </h2>
            <div>
              <Select
                id="color"
                options={lengthTypeOptions}
                isMulti={false}
                value={lengthType}
                onChange={this.lengthTypeChange}
                onBlur={this.handleBlur}
                placeholder={"Select a lengthType..."}
              />
            </div>
            <div>
              <label>Size:</label>
              <input
                value={this.state.size}
                onChange={this.onSizeChange}
                type="number"
                name="size"
                min="1"
                placeholder="1"
                required
              />
            </div>
              </div>
            );
          }
        }

For instance each field.name is rendered to a checkbox and should have a select dropdown for lengthType and input for size like so:

{
    field.name: {
      size: 1,
      lengthType: "Fixed"
    }
}

So I have the component designed, just need to render it to each checkbox that is selected. How can I pass the FieldInput component to the checkboxes based on if they are toggled or not?

Inside the <Myselect> component, you can find the <FieldArray> component, using the onChange method

onChange={e => {
  if (e.target.checked) {
    arrayHelpers.push(field.name);

When's it's checked it also needs to render <FieldInputs>

Here's a link to a sandbox with the classes/components described above

from React - render class component when checkbox is selected