fix: prevent rendering too many hooks error (#8667)

We found an issue where we'd get a minified react error referencing the
LazyProjectExport component.


![image](https://github.com/user-attachments/assets/3cb76315-ccef-4fa6-968c-845ecf21bc0f)


We suspect that the issue might be the conditional rendering of this
component, so the fix is to always render it, but to use the flag to
check whether we should show the count or not.

frontend/src/component/project/Project/Project.tsx

@@ -75,7 +75,7 @@ interface ITab {
     flag?: keyof UiFlags;
     new?: boolean;
     isEnterprise?: boolean;
-    label?: () => ReactNode;
+    labelOverride?: () => ReactNode;
 }
 
 const StyledCounterBadge = styled(CounterBadge)(({ theme }) => ({
@@ -94,9 +94,14 @@ const TabText = styled('span')(({ theme }) => ({
 }));
 
 const ChangeRequestsLabel = () => {
+    const simplifyProjectOverview = useUiFlag('simplifyProjectOverview');
     const projectId = useRequiredPathParam('projectId');
     const { total } = useActionableChangeRequests(projectId);
 
+    if (!simplifyProjectOverview) {
+        return 'Change requests';
+    }
+
     return (
         <StyledCounterBadge badgeContent={total ?? 0} color='primary'>
             <TabText>Change requests</TabText>
@@ -167,7 +172,7 @@ export const Project = () => {
             path: `${basePath}/change-requests`,
             name: 'change-request',
             isEnterprise: true,
-            label: simplifyProjectOverview ? ChangeRequestsLabel : undefined,
+            labelOverride: ChangeRequestsLabel,
         },
         {
             title: 'Applications',
@@ -319,7 +324,13 @@ export const Project = () => {
                                 <StyledTab
                                     data-loading-project
                                     key={tab.title}
-                                    label={tab.label ? tab.label() : tab.title}
+                                    label={
+                                        tab.labelOverride ? (
+                                            <tab.labelOverride />
+                                        ) : (
+                                            tab.title
+                                        )
+                                    }
                                     value={tab.path}
                                     onClick={() => {
                                         if (tab.title !== 'Flags') {