diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
index e6d07931b..e1ad43085 100644
--- a/src/components/Breakdown.jsx
+++ b/src/components/Breakdown.jsx
@@ -36,7 +36,8 @@ Breakdown.propTypes = {
 };
 
 const BreakdownItem = ({ children, info, methodIcon, secondary, value, className, color = "default", ...rest }) => {
-    const { currency, locale } = useContext(CurrencyContext);
+    /** When BreakdownItem is directly used without outer <Breakdown /> component, the context would be `undefined` */
+    const { currency, locale } = useContext(CurrencyContext) ?? {};
 
     return (
         <tr className={clsx("ui-breakdown-item", colors[color], className)} {...rest}>
@@ -78,7 +79,7 @@ Breakdown.Item = BreakdownItem;
 Breakdown.Item.displayName = "Breakdown.Item";
 
 const BreakdownSubtotalItem = ({ children, info, value, className, color = "black", ...rest }) => {
-    const { currency, locale } = useContext(CurrencyContext);
+    const { currency, locale } = useContext(CurrencyContext) ?? {};
 
     return (
         <tr className={clsx("ui-breakdown-subtotal-item", "font-bold", colors[color], className)} {...rest}>