diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js
index f5b071945..aff2d9997 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js
@@ -1,8 +1,6 @@
 import { Icon } from '@wordpress/components';
 import { chevronDown, chevronUp } from '@wordpress/icons';
-
 import classNames from 'classnames';
-
 import { useAccordionState } from '../../hooks/useAccordionState';
 
 // Provide defaults for all layout components so the generic version just works.
@@ -24,6 +22,13 @@ const DefaultDescription = ( { children } ) => (
 	<div className="ppcp-r-accordion__description">{ children }</div>
 );
 
+const AccordionContent = ( { isOpen, children } ) => {
+	if ( ! isOpen || ! children ) {
+		return null;
+	}
+	return <div className="ppcp-r-accordion__content">{ children }</div>;
+};
+
 const Accordion = ( {
 	title,
 	id = '',
@@ -65,9 +70,7 @@ const Accordion = ( {
 					) }
 				</Header>
 			</button>
-			{ isOpen && children && (
-				<div className="ppcp-r-accordion__content">{ children }</div>
-			) }
+			<AccordionContent isOpen={ isOpen }>{ children }</AccordionContent>
 		</div>
 	);
 };
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
index 8a953c805..cf7f2cee4 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
@@ -9,25 +9,19 @@ import {
 } from './SettingsBlockElements';
 
 const SettingsAccordion = ( { title, description, children, ...props } ) => (
-	<SettingsBlock
-		{ ...props }
-		className="ppcp-r-settings-block__accordion"
-		components={ [
-			() => (
-				<Accordion
-					title={ title }
-					description={ description }
-					Header={ Header }
-					TitleWrapper={ TitleWrapper }
-					Title={ Title }
-					Action={ Action }
-					Description={ Description }
-				>
-					{ children }
-				</Accordion>
-			),
-		] }
-	/>
+	<SettingsBlock { ...props } className="ppcp-r-settings-block__accordion">
+		<Accordion
+			title={ title }
+			description={ description }
+			Header={ Header }
+			TitleWrapper={ TitleWrapper }
+			Title={ Title }
+			Action={ Action }
+			Description={ Description }
+		>
+			{ children }
+		</Accordion>
+	</SettingsBlock>
 );
 
 export default SettingsAccordion;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
index e2b2aeb53..e66223ba5 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
@@ -3,32 +3,24 @@ import SettingsBlock from './SettingsBlock';
 import { Header, Title, Action, Description } from './SettingsBlockElements';
 
 const ButtonSettingsBlock = ( { title, description, ...props } ) => (
-	<SettingsBlock
-		{ ...props }
-		className="ppcp-r-settings-block__button"
-		components={ [
-			() => (
-				<>
-					<Header>
-						<Title>{ title }</Title>
-						<Description>{ description }</Description>
-					</Header>
-					<Action>
-						<Button
-							variant={ props.actionProps?.buttonType }
-							onClick={
-								props.actionProps?.callback
-									? () => props.actionProps.callback()
-									: undefined
-							}
-						>
-							{ props.actionProps.value }
-						</Button>
-					</Action>
-				</>
-			),
-		] }
-	/>
+	<SettingsBlock { ...props } className="ppcp-r-settings-block__button">
+		<Header>
+			<Title>{ title }</Title>
+			<Description>{ description }</Description>
+		</Header>
+		<Action>
+			<Button
+				variant={ props.actionProps?.buttonType }
+				onClick={
+					props.actionProps?.callback
+						? () => props.actionProps.callback()
+						: undefined
+				}
+			>
+				{ props.actionProps.value }
+			</Button>
+		</Action>
+	</SettingsBlock>
 );
 
 export default ButtonSettingsBlock;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
index 7b6010de6..2984e8074 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
@@ -11,56 +11,42 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 		}
 
 		return (
-			<>
-				<span className="ppcp-r-feature-item__notes">
-					{ notes.map( ( note, index ) => (
-						<span key={ index }>{ note }</span>
-					) ) }
-				</span>
-			</>
+			<span className="ppcp-r-feature-item__notes">
+				{ notes.map( ( note, index ) => (
+					<span key={ index }>{ note }</span>
+				) ) }
+			</span>
 		);
 	};
 
 	return (
-		<SettingsBlock
-			{ ...props }
-			className="ppcp-r-settings-block__feature"
-			components={ [
-				() => (
-					<>
-						<Header>
-							<Title>
-								{ title }
-								{ props.actionProps?.featureStatus && (
-									<TitleBadge
-										{ ...props.actionProps?.badge }
-									/>
-								) }
-							</Title>
-							<Description className="ppcp-r-settings-block__feature__description">
-								{ description }
-								{ printNotes() }
-							</Description>
-						</Header>
-						<Action>
-							<div className="ppcp-r-feature-item__buttons">
-								{ props.actionProps?.buttons.map(
-									( button ) => (
-										<Button
-											href={ button.url }
-											key={ button.text }
-											variant={ button.type }
-										>
-											{ button.text }
-										</Button>
-									)
-								) }
-							</div>
-						</Action>
-					</>
-				),
-			] }
-		/>
+		<SettingsBlock { ...props } className="ppcp-r-settings-block__feature">
+			<Header>
+				<Title>
+					{ title }
+					{ props.actionProps?.featureStatus && (
+						<TitleBadge { ...props.actionProps?.badge } />
+					) }
+				</Title>
+				<Description className="ppcp-r-settings-block__feature__description">
+					{ description }
+					{ printNotes() }
+				</Description>
+			</Header>
+			<Action>
+				<div className="ppcp-r-feature-item__buttons">
+					{ props.actionProps?.buttons.map( ( button ) => (
+						<Button
+							href={ button.url }
+							key={ button.text }
+							variant={ button.type }
+						>
+							{ button.text }
+						</Button>
+					) ) }
+				</div>
+			</Action>
+		</SettingsBlock>
 	);
 };
 
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
index 6f8a06e3b..3470e8b60 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
@@ -42,28 +42,20 @@ const InputSettingsBlock = ( {
 	order = DEFAULT_ELEMENT_ORDER,
 	...props
 } ) => (
-	<SettingsBlock
-		{ ...props }
-		className="ppcp-r-settings-block__input"
-		components={ [
-			() => (
-				<>
-					{ order.map( ( elementKey ) => {
-						const RenderElement = ELEMENT_RENDERERS[ elementKey ];
-						return RenderElement ? (
-							<RenderElement
-								key={ elementKey }
-								title={ title }
-								description={ description }
-								supplementaryLabel={ supplementaryLabel }
-								actionProps={ props.actionProps }
-							/>
-						) : null;
-					} ) }
-				</>
-			),
-		] }
-	/>
+	<SettingsBlock { ...props } className="ppcp-r-settings-block__input">
+		{ order.map( ( elementKey ) => {
+			const RenderElement = ELEMENT_RENDERERS[ elementKey ];
+			return RenderElement ? (
+				<RenderElement
+					key={ elementKey }
+					title={ title }
+					description={ description }
+					supplementaryLabel={ supplementaryLabel }
+					actionProps={ props.actionProps }
+				/>
+			) : null;
+		} ) }
+	</SettingsBlock>
 );
 
 export default InputSettingsBlock;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
index 28ed05f8c..3ffb91051 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
@@ -16,25 +16,18 @@ const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
 	return (
 		<SettingsBlock
 			className={ `ppcp-r-settings-block__payment-methods ${ className }` }
-			components={ [
-				() => (
-					<>
-						{ paymentMethods.map( ( paymentMethod ) => (
-							<PaymentMethodItemBlock
-								key={ paymentMethod.id }
-								{ ...paymentMethod }
-								isSelected={
-									selectedMethod === paymentMethod.id
-								}
-								onSelect={ ( checked ) =>
-									handleSelect( paymentMethod.id, checked )
-								}
-							/>
-						) ) }
-					</>
-				),
-			] }
-		/>
+		>
+			{ paymentMethods.map( ( paymentMethod ) => (
+				<PaymentMethodItemBlock
+					key={ paymentMethod.id }
+					{ ...paymentMethod }
+					isSelected={ selectedMethod === paymentMethod.id }
+					onSelect={ ( checked ) =>
+						handleSelect( paymentMethod.id, checked )
+					}
+				/>
+			) ) }
+		</SettingsBlock>
 	);
 };
 
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js
index 9519f127f..44270d874 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js
@@ -11,37 +11,32 @@ const RadioSettingsBlock = ( {
 	<SettingsBlock
 		{ ...props }
 		className="ppcp-r-settings-block__radio ppcp-r-settings-block--expert-rdb"
-		components={ [
-			() => (
-				<>
-					<Header>
-						<Title>{ title }</Title>
-						<Description>{ description }</Description>
-					</Header>
-					{ options.map( ( option ) => (
-						<PayPalRdbWithContent
-							key={ option.id }
-							id={ option.id }
-							name={ props.actionProps?.name }
-							value={ option.value }
-							currentValue={ props.actionProps?.currentValue }
-							handleRdbState={ ( newValue ) =>
-								props.actionProps?.callback(
-									props.actionProps?.key,
-									newValue
-								)
-							}
-							label={ option.label }
-							description={ option.description }
-							toggleAdditionalContent={ true }
-						>
-							{ option.additionalContent }
-						</PayPalRdbWithContent>
-					) ) }
-				</>
-			),
-		] }
-	/>
+	>
+		<Header>
+			<Title>{ title }</Title>
+			<Description>{ description }</Description>
+		</Header>
+		{ options.map( ( option ) => (
+			<PayPalRdbWithContent
+				key={ option.id }
+				id={ option.id }
+				name={ props.actionProps?.name }
+				value={ option.value }
+				currentValue={ props.actionProps?.currentValue }
+				handleRdbState={ ( newValue ) =>
+					props.actionProps?.callback(
+						props.actionProps?.key,
+						newValue
+					)
+				}
+				label={ option.label }
+				description={ option.description }
+				toggleAdditionalContent={ true }
+			>
+				{ option.additionalContent }
+			</PayPalRdbWithContent>
+		) ) }
+	</SettingsBlock>
 );
 
 export default RadioSettingsBlock;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
index acef1d29b..5436d0921 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
@@ -35,27 +35,19 @@ const SelectSettingsBlock = ( {
 	order = DEFAULT_ELEMENT_ORDER,
 	...props
 } ) => (
-	<SettingsBlock
-		{ ...props }
-		className="ppcp-r-settings-block__select"
-		components={ [
-			() => (
-				<>
-					{ order.map( ( elementKey ) => {
-						const RenderElement = ELEMENT_RENDERERS[ elementKey ];
-						return RenderElement ? (
-							<RenderElement
-								key={ elementKey }
-								title={ title }
-								description={ description }
-								actionProps={ props.actionProps }
-							/>
-						) : null;
-					} ) }
-				</>
-			),
-		] }
-	/>
+	<SettingsBlock { ...props } className="ppcp-r-settings-block__select">
+		{ order.map( ( elementKey ) => {
+			const RenderElement = ELEMENT_RENDERERS[ elementKey ];
+			return RenderElement ? (
+				<RenderElement
+					key={ elementKey }
+					title={ title }
+					description={ description }
+					actionProps={ props.actionProps }
+				/>
+			) : null;
+		} ) }
+	</SettingsBlock>
 );
 
 export default SelectSettingsBlock;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
index bb5de947a..768fa9387 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
@@ -1,16 +1,9 @@
-const SettingsBlock = ( { className, components = [], children } ) => {
+const SettingsBlock = ( { className, children } ) => {
 	const blockClassName = [ 'ppcp-r-settings-block', className ].filter(
 		Boolean
 	);
 
-	return (
-		<div className={ blockClassName.join( ' ' ) }>
-			{ children ||
-				components.map( ( Component, index ) => (
-					<Component key={ index } />
-				) ) }
-		</div>
-	);
+	return <div className={ blockClassName.join( ' ' ) }>{ children }</div>;
 };
 
 export default SettingsBlock;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js
index 3e0c0eac6..b66536b00 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js
@@ -3,35 +3,25 @@ import SettingsBlock from './SettingsBlock';
 import { Header, Title, Action, Description } from './SettingsBlockElements';
 
 const ToggleSettingsBlock = ( { title, description, ...props } ) => (
-	<SettingsBlock
-		{ ...props }
-		className="ppcp-r-settings-block__toggle"
-		components={ [
-			() => (
-				<Action>
-					<ToggleControl
-						className="ppcp-r-settings-block__toggle-control"
-						__nextHasNoMarginBottom={ true }
-						checked={ props.actionProps?.value }
-						onChange={ ( newValue ) =>
-							props.actionProps?.callback(
-								props.actionProps?.key,
-								newValue
-							)
-						}
-					/>
-				</Action>
-			),
-			() => (
-				<Header>
-					{ title && <Title>{ title }</Title> }
-					{ description && (
-						<Description>{ description }</Description>
-					) }
-				</Header>
-			),
-		] }
-	/>
+	<SettingsBlock { ...props } className="ppcp-r-settings-block__toggle">
+		<Action>
+			<ToggleControl
+				className="ppcp-r-settings-block__toggle-control"
+				__nextHasNoMarginBottom={ true }
+				checked={ props.actionProps?.value }
+				onChange={ ( newValue ) =>
+					props.actionProps?.callback(
+						props.actionProps?.key,
+						newValue
+					)
+				}
+			/>
+		</Action>
+		<Header>
+			{ title && <Title>{ title }</Title> }
+			{ description && <Description>{ description }</Description> }
+		</Header>
+	</SettingsBlock>
 );
 
 export default ToggleSettingsBlock;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OrderIntent.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OrderIntent.js
index 1d1b632fe..a53090ea1 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OrderIntent.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/OrderIntent.js
@@ -9,55 +9,40 @@ import {
 
 const OrderIntent = ( { updateFormValue, settings } ) => {
 	return (
-		<SettingsBlock
-			components={ [
-				() => (
-					<>
-						<Header>
-							<Title>
-								{ __(
-									'Order Intent',
-									'woocommerce-paypal-payments'
-								) }
-							</Title>
-							<Description>
-								{ __(
-									'Choose between immediate capture or authorization-only, with manual capture in the Order section.',
-									'woocommerce-paypal-payments'
-								) }
-							</Description>
-						</Header>
-					</>
-				),
-				() => (
-					<>
-						<ToggleSettingsBlock
-							title={ __(
-								'Authorize Only',
-								'woocommerce-paypal-payments'
-							) }
-							actionProps={ {
-								callback: updateFormValue,
-								key: 'authorizeOnly',
-								value: settings.authorizeOnly,
-							} }
-						/>
+		<SettingsBlock>
+			<Header>
+				<Title>
+					{ __( 'Order Intent', 'woocommerce-paypal-payments' ) }
+				</Title>
+				<Description>
+					{ __(
+						'Choose between immediate capture or authorization-only, with manual capture in the Order section.',
+						'woocommerce-paypal-payments'
+					) }
+				</Description>
+			</Header>
 
-						<ToggleSettingsBlock
-							title={ __(
-								'Capture Virtual-Only Orders',
-								'woocommerce-paypal-payments'
-							) }
-							actionProps={ {
-								callback: updateFormValue,
-								key: 'captureVirtualOnlyOrders',
-								value: settings.captureVirtualOnlyOrders,
-							} }
-						/>
-					</>
-				),
-			] }
-		/>
+			<ToggleSettingsBlock
+				title={ __( 'Authorize Only', 'woocommerce-paypal-payments' ) }
+				actionProps={ {
+					callback: updateFormValue,
+					key: 'authorizeOnly',
+					value: settings.authorizeOnly,
+				} }
+			/>
+
+			<ToggleSettingsBlock
+				title={ __(
+					'Capture Virtual-Only Orders',
+					'woocommerce-paypal-payments'
+				) }
+				actionProps={ {
+					callback: updateFormValue,
+					key: 'captureVirtualOnlyOrders',
+					value: settings.captureVirtualOnlyOrders,
+				} }
+			/>
+		</SettingsBlock>
 	);
 };
 
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/SavePaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/SavePaymentMethods.js
index f10907c4c..aefa9f44c 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/SavePaymentMethods.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/SavePaymentMethods.js
@@ -1,82 +1,73 @@
 import { __, sprintf } from '@wordpress/i18n';
 import {
+	Header,
 	SettingsBlock,
 	ToggleSettingsBlock,
 	Title,
 	Description,
 } from '../../../../ReusableComponents/SettingsBlocks';
-import { Header } from '../../../../ReusableComponents/SettingsBlocks/SettingsBlockElements';
 
 const SavePaymentMethods = ( { updateFormValue, settings } ) => {
 	return (
-		<SettingsBlock
-			className="ppcp-r-settings-block--save-payment-methods"
-			components={ [
-				() => (
-					<>
-						<Header>
-							<Title>
-								{ __(
-									'Save payment methods',
-									'woocommerce-paypal-payments'
-								) }
-							</Title>
-							<Description>
-								{ __(
-									'Securely store customers’ payment methods for future payments and subscriptions, simplifying checkout and enabling recurring transactions.',
+		<SettingsBlock className="ppcp-r-settings-block--save-payment-methods">
+			<Header>
+				<Title>
+					{ __(
+						'Save payment methods',
+						'woocommerce-paypal-payments'
+					) }
+				</Title>
+				<Description>
+					{ __(
+						"Securely store customers' payment methods for future payments and subscriptions, simplifying checkout and enabling recurring transactions.",
+						'woocommerce-paypal-payments'
+					) }
+				</Description>
+			</Header>
+
+			<ToggleSettingsBlock
+				title={ __(
+					'Save PayPal and Venmo',
+					'woocommerce-paypal-payments'
+				) }
+				description={
+					<div
+						dangerouslySetInnerHTML={ {
+							__html: sprintf(
+								/* translators: 1: URL to Pay Later documentation, 2: URL to Alternative Payment Methods documentation */
+								__(
+									'Securely store your customers\' PayPal accounts for a seamless checkout experience. <br />This will disable all <a target="_blank" rel="noreferrer" href="%1$s">Pay Later</a> features and <a target="_blank" rel="noreferrer" href="%2$s">Alternative Payment Methods</a> on your site.',
 									'woocommerce-paypal-payments'
-								) }
-							</Description>
-						</Header>
-					</>
-				),
-				() => (
-					<ToggleSettingsBlock
-						title={ __(
-							'Save PayPal and Venmo',
-							'woocommerce-paypal-payments'
-						) }
-						description={
-							<div
-								dangerouslySetInnerHTML={ {
-									__html: sprintf(
-										/* translators: 1: URL to Pay Later documentation, 2: URL to Alternative Payment Methods documentation */
-										__(
-											'Securely store your customers\' PayPal accounts for a seamless checkout experience. <br />This will disable all <a target="_blank" rel="noreferrer" href="%1$s">Pay Later</a> features and <a target="_blank" rel="noreferrer" href="%2$s">Alternative Payment Methods</a> on your site.',
-											'woocommerce-paypal-payments'
-										),
-										'https://woocommerce.com/document/woocommerce-paypal-payments/#pay-later',
-										'https://woocommerce.com/document/woocommerce-paypal-payments/#alternative-payment-methods'
-									),
-								} }
-							/>
-						}
-						actionProps={ {
-							value: settings.savePaypalAndVenmo,
-							callback: updateFormValue,
-							key: 'savePaypalAndVenmo',
+								),
+								'https://woocommerce.com/document/woocommerce-paypal-payments/#pay-later',
+								'https://woocommerce.com/document/woocommerce-paypal-payments/#alternative-payment-methods'
+							),
 						} }
 					/>
-				),
-				() => (
-					<ToggleSettingsBlock
-						title={ __(
-							'Save Credit and Debit Cards',
-							'woocommerce-paypal-payments'
-						) }
-						description={ __(
-							"Securely store your customer's credit card.",
-							'woocommerce-paypal-payments'
-						) }
-						actionProps={ {
-							callback: updateFormValue,
-							key: 'saveCreditCardAndDebitCard',
-							value: settings.saveCreditCardAndDebitCard,
-						} }
-					/>
-				),
-			] }
-		/>
+				}
+				actionProps={ {
+					value: settings.savePaypalAndVenmo,
+					callback: updateFormValue,
+					key: 'savePaypalAndVenmo',
+				} }
+			/>
+
+			<ToggleSettingsBlock
+				title={ __(
+					'Save Credit and Debit Cards',
+					'woocommerce-paypal-payments'
+				) }
+				description={ __(
+					"Securely store your customer's credit card.",
+					'woocommerce-paypal-payments'
+				) }
+				actionProps={ {
+					callback: updateFormValue,
+					key: 'saveCreditCardAndDebitCard',
+					value: settings.saveCreditCardAndDebitCard,
+				} }
+			/>
+		</SettingsBlock>
 	);
 };
 
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting.js
index f53a360c7..82cd635dc 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting.js
@@ -36,36 +36,30 @@ const Troubleshooting = ( { updateFormValue, settings } ) => {
 					value: settings.logging,
 				} }
 			/>
-			<SettingsBlock
-				components={ [
-					() => (
-						<>
-							<Header>
-								<Title>
-									{ __(
-										'Subscribed PayPal webhooks',
-										'woocommerce-paypal-payments'
-									) }
-								</Title>
-								<Description>
-									{ __(
-										'The following PayPal webhooks are subscribed. More information about the webhooks is available in the',
-										'woocommerce-paypal-payments'
-									) }{ ' ' }
-									<a href="https://woocommerce.com/document/woocommerce-paypal-payments/#webhook-status">
-										{ __(
-											'Webhook Status documentation',
-											'woocommerce-paypal-payments'
-										) }
-									</a>
-									.
-								</Description>
-							</Header>
-							<HooksTable data={ hooksExampleData() } />
-						</>
-					),
-				] }
-			/>
+			<SettingsBlock>
+				<Header>
+					<Title>
+						{ __(
+							'Subscribed PayPal webhooks',
+							'woocommerce-paypal-payments'
+						) }
+					</Title>
+					<Description>
+						{ __(
+							'The following PayPal webhooks are subscribed. More information about the webhooks is available in the',
+							'woocommerce-paypal-payments'
+						) }{ ' ' }
+						<a href="https://woocommerce.com/document/woocommerce-paypal-payments/#webhook-status">
+							{ __(
+								'Webhook Status documentation',
+								'woocommerce-paypal-payments'
+							) }
+						</a>
+						.
+					</Description>
+				</Header>
+				<HooksTable data={ hooksExampleData() } />
+			</SettingsBlock>
 
 			<ButtonSettingsBlock
 				title={ __(