fix(ui): cache data list for flags and segments (#3690)

Somehow useMemo was missed for those places and if the error occurs
react goes crazy with rerender the page as it gets new empty array

ui/src/components/flags/FlagTable.tsx

@@ -8,7 +8,7 @@ import {
   Row,
   useReactTable
 } from '@tanstack/react-table';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { DataTablePagination } from '~/components/ui/table-pagination';
@@ -138,7 +138,7 @@ export default function FlagTable(props: FlagTableProps) {
   const sorting = useSelector(selectSorting);
 
   const { data, isLoading, error } = useListFlagsQuery(namespace.key);
-  const flags = data?.flags || [];
+  const flags = useMemo(() => data?.flags || [], [data]);
 
   const { setError } = useError();
   useEffect(() => {

ui/src/components/segments/SegmentTable.tsx

@@ -8,7 +8,7 @@ import {
   Row,
   useReactTable
 } from '@tanstack/react-table';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectSorting, setSorting } from '~/app/segments/segmentsApi';
 import { useTimezone } from '~/data/hooks/timezone';
@@ -130,7 +130,7 @@ export default function SegmentTable(props: SegmentTableProps) {
 
   const sorting = useSelector(selectSorting);
   const { data, isLoading, error } = useListSegmentsQuery(namespace.key);
-  const segments = data?.segments || [];
+  const segments = useMemo(() => data?.segments || [], [data]);
   const table = useReactTable({
     data: segments,
     columns,