Wrapping multiple nested elements in a <> should make it work if that's the error you're caught up with.

{valuePro ?
                <>
                    <Button
                        className="proButton"
                        secondary
                        onClick={triggerFileSelectPopup}
                        style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}
                    >
                        Change
                    </Button>
                    <Button
                        className="proButton"
                        onClick={onDownload}
                        style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}>
                        Confirm
                    </Button>
                </> :
                <>
                    <GenericButton
                        secondary
                        onClick={triggerFileSelectPopup}
                        style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}
                    >
                        Change
                    </GenericButton>
                    <GenericButton
                        onClick={onDownload}
                        style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}>
                        Confirm
                    </GenericButton>
                </>
}

We can do that by actually picking up what component do we want to render:

const ButtonComponent = valuePro ? GenericButton : Button;

You also have common styles in there which u can extract for better readability here:

const calculatedStyles = { marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" };

Your code can look like this:

              <React.Fragment>
                <ButtonComponent 
                    secondary
                    onClick={triggerFileSelectPopup}
                    style={calculatedStyles}
                >
                    Change
                </ButtonComponent>
                <ButtonComponent 
                    onClick={onDownload}
                    style={calculatedStyles}>
                    Confirm
                </ButtonComponent>
              <React.Fragment>
}

Note that u can replace <React.Fragment></React.Fragment> with <></>

{valuePro ?
                <>
                <Button
                    className="proButton"
                    secondary
                    onClick={triggerFileSelectPopup}
                    style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}
                >
                    Change
                </Button>
                <Button
                    className="proButton"
                    onClick={onDownload}
                    style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}>
                    Confirm
                </Button>
                 </> :
                <>
                <GenericButton
                    secondary
                    onClick={triggerFileSelectPopup}
                    style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}
                >
                    Change
                </GenericButton>
                <GenericButton
                    onClick={onDownload}
                    style={{ marginRight: "10px", zIndex: (isVisible ? 6 : 1), marginBottom: "8px" }}>
                    Confirm
                </GenericButton>
                </>
}

try this since ternary if wants to get only 1 element