React switch in render: div children no styling

so in my render() function I have a switch to conditionally load different components based on a type, the problem is that for one of the cases I had to render 2 components, so I wrapped them in a div, by doing so they lose the class that was assigned to them inputField, this is how the code is looking:

{(() => {
                switch (values.type) {
                  case "sole":
                    return (
                      <div>
                        <InputMask
                          className={classNames(
                            styles.inputField,
                            styles.override
                          )}
                        >
                          {() => (
                            <LNTextField
                              type="text"
                            />
                          )}
                        </InputMask>
                        <InputMask
                          className={classNames(
                            styles.inputField,
                            styles.override
                          )}
                        >
                          {() => (
                            <LNTextField
                              name="dob"
                              type="text"
                            />
                          )}
                        </InputMask>
                      </div>
                    );
                  default:
                    return null;
                }
              })()}

I removed alot of the functional bits of the code since this is a styling issue, why are the InputMasks not having the inputField class applied now that they're in a div and how can I fix this?