fix(frontend): fix some next errors (#2503)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/assistants/page.tsx

@@ -86,6 +86,7 @@ const Search = (): JSX.Element => {
                     setCurrentAssistant(assistant);
                   }}
                   key={assistant.name}
+                  cardKey={assistant.name}
                 />
               );
             })}

frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTab.tsx

@@ -9,7 +9,7 @@ import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider
 import { Knowledge } from "@/lib/types/Knowledge";
 
 import styles from "./KnowledgeTab.module.scss";
-import { KnowledgeTable } from "./KnowledgeTable/KnowledgeTable";
+import KnowledgeTable from "./KnowledgeTable/KnowledgeTable";
 import { useAddedKnowledge } from "./hooks/useAddedKnowledge";
 
 type KnowledgeTabProps = {

frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeTable.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 import { Knowledge } from "@/lib/types/Knowledge";
 
 import KnowledgeItem from "./KnowledgeItem/KnowledgeItem";
@@ -7,17 +9,21 @@ interface KnowledgeTableProps {
   knowledgeList: Knowledge[];
 }
 
-export const KnowledgeTable = ({
-  knowledgeList,
-}: KnowledgeTableProps): JSX.Element => {
-  return (
-    <div className={styles.knowledge_table_wrapper}>
-      <span className={styles.title}>Uploaded Knowledge</span>
-      <div>
-        {knowledgeList.map((knowledge) => (
-          <KnowledgeItem knowledge={knowledge} key={knowledge.id} />
-        ))}
+const KnowledgeTable = React.forwardRef<HTMLDivElement, KnowledgeTableProps>(
+  ({ knowledgeList }, ref) => {
+    return (
+      <div ref={ref} className={styles.knowledge_table_wrapper}>
+        <span className={styles.title}>Uploaded Knowledge</span>
+        <div>
+          {knowledgeList.map((knowledge) => (
+            <KnowledgeItem knowledge={knowledge} key={knowledge.id} />
+          ))}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
+
+KnowledgeTable.displayName = "KnowledgeTable";
+
+export default KnowledgeTable;

frontend/app/studio/[brainId]/BrainManagementTabs/components/SettingsTab/components/ModelSelection/ModelSelection.tsx

@@ -59,7 +59,7 @@ export const ModelSelection = (props: ModelSelectionProps): JSX.Element => {
             type="range"
             min="10"
             max={defineMaxTokens(model)}
-            value={maxTokens}
+            value={maxTokens || ""}
             disabled={!hasEditRights}
             {...register("maxTokens")}
           />

frontend/lib/components/AddBrainModal/components/BrainTypeSelectionStep/BrainCatalogue/BrainCatalogue.tsx

@@ -40,6 +40,7 @@ export const BrainCatalogue = ({
         {brains.map((brain) => {
           return (
             <BrainCard
+              key={brain.id}
               tooltip={brain.description}
               brainName={brain.integration_display_name}
               tags={brain.tags}
@@ -49,7 +50,7 @@ export const BrainCatalogue = ({
                 next();
                 setCurrentSelectedBrain(brain);
               }}
-              key={brain.id}
+              cardKey={brain.id}
               disabled={!userIdentityData?.onboarded && !brain.onboarding_brain}
             />
           );

frontend/lib/components/AddBrainModal/components/Stepper/Stepper.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 import { Icon } from "@/lib/components/ui/Icon/Icon";
 
 import styles from "./Stepper.module.scss";
@@ -17,7 +19,7 @@ export const Stepper = ({ currentStep, steps }: StepperProps): JSX.Element => {
   return (
     <div className={styles.stepper_wrapper}>
       {steps.map((step, index) => (
-        <>
+        <React.Fragment key={step.value}>
           <div
             className={`${styles.step} ${
               index === currentStepIndex
@@ -54,7 +56,7 @@ export const Stepper = ({ currentStep, steps }: StepperProps): JSX.Element => {
               `}
             ></div>
           )}
-        </>
+        </React.Fragment>
       ))}
     </div>
   );

frontend/lib/components/ui/BrainCard/BrainCard.tsx

@@ -15,7 +15,7 @@ interface BrainCardProps {
   brainName: string;
   tags: string[];
   callback: () => void;
-  key: string;
+  cardKey: string;
   disabled?: boolean;
 }
 
@@ -26,14 +26,14 @@ export const BrainCard = ({
   brainName,
   tags,
   callback,
-  key,
+  cardKey,
   disabled,
 }: BrainCardProps): JSX.Element => {
   const { isDarkMode } = useUserSettingsContext();
 
   return (
     <div
-      key={key}
+      key={cardKey}
       className={`${styles.brain_card_container} ${
         disabled ? styles.disabled : ""
       }`}