diff --git a/assets/js/dashboard/stats/modals/breakdown-modal.tsx b/assets/js/dashboard/stats/modals/breakdown-modal.tsx
index 6f0bc3f057e2..35b50644f46a 100644
--- a/assets/js/dashboard/stats/modals/breakdown-modal.tsx
+++ b/assets/js/dashboard/stats/modals/breakdown-modal.tsx
@@ -79,7 +79,7 @@ export default function BreakdownModal<TListItem extends { name: string }>({
 }) {
   const site = useSiteContext()
   const { query } = useQueryContext()
-  const [meta, setMeta] = useState<BreakdownResultMeta | undefined>(undefined)
+  const [meta, setMeta] = useState<BreakdownResultMeta | null>(null)
 
   const [search, setSearch] = useState('')
   const defaultOrderBy = getStoredOrderBy({
diff --git a/assets/js/dashboard/stats/reports/list.js b/assets/js/dashboard/stats/reports/list.js
index 2908778e20f5..ae7e09fd489f 100644
--- a/assets/js/dashboard/stats/reports/list.js
+++ b/assets/js/dashboard/stats/reports/list.js
@@ -148,7 +148,7 @@ export default function ListReport({
   fetchData
 }) {
   const { query } = useQueryContext()
-  const [state, setState] = useState({ loading: true, list: null })
+  const [state, setState] = useState({ loading: true, list: null, meta: null })
   const [visible, setVisible] = useState(false)
 
   const isRealtime = isRealTimeDashboard(query)
@@ -156,7 +156,7 @@ export default function ListReport({
 
   const getData = useCallback(() => {
     if (!isRealtime) {
-      setState({ loading: true, list: null })
+      setState({ loading: true, list: null, meta: null })
     }
     fetchData().then((response) => {
       if (afterFetchData) {
@@ -177,7 +177,7 @@ export default function ListReport({
       // When a goal filter is applied or removed, we always want the component to go into a
       // loading state, even in realtime mode, because the metrics list will change. We can
       // only read the new metrics once the new list is loaded.
-      setState({ loading: true, list: null })
+      setState({ loading: true, list: null, meta: null })
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [goalFilterApplied])
diff --git a/assets/js/dashboard/stats/reports/metric-value.tsx b/assets/js/dashboard/stats/reports/metric-value.tsx
index 58ea1681b2df..40bafade7b78 100644
--- a/assets/js/dashboard/stats/reports/metric-value.tsx
+++ b/assets/js/dashboard/stats/reports/metric-value.tsx
@@ -37,7 +37,7 @@ export default function MetricValue(props: {
   metric: Metric
   renderLabel: (query: DashboardQuery) => string
   formatter?: (value: ValueType) => string
-  meta: BreakdownResultMeta
+  meta: BreakdownResultMeta | null
 }) {
   const { query } = useQueryContext()
 
@@ -92,7 +92,7 @@ function ComparisonTooltipContent({
   metric: Metric
   metricLabel: string
   formatter?: (value: ValueType) => string
-  meta: BreakdownResultMeta
+  meta: BreakdownResultMeta | null
 }) {
   const longFormatter = formatter ?? MetricFormatterLong[metric]
 
@@ -104,7 +104,7 @@ function ComparisonTooltipContent({
     return ` ${metricLabel.toLowerCase()}`
   }, [metricLabel])
 
-  if (comparison) {
+  if (comparison && meta) {
     return (
       <div className="text-left whitespace-nowrap py-1 space-y-2">
         <div>