Update React Lint rules for TSX

(cherry picked from commit 1299a97579bec52ee3d16ab8d05c9e22edd80330)

Closes #10248

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.tsx

@@ -702,7 +702,7 @@ function InteractiveImportModalContent(
 
               <MenuContent>
                 <SelectedMenuItem
-                  name={'all'}
+                  name="all"
                   isSelected={!filterExistingFiles}
                   onPress={onFilterExistingFilesChange}
                 >
@@ -710,7 +710,7 @@ function InteractiveImportModalContent(
                 </SelectedMenuItem>
 
                 <SelectedMenuItem
-                  name={'new'}
+                  name="new"
                   isSelected={filterExistingFiles}
                   onPress={onFilterExistingFilesChange}
                 >
@@ -790,7 +790,7 @@ function InteractiveImportModalContent(
           <SelectInput
             className={styles.bulkSelect}
             name="select"
-            value={'select'}
+            value="select"
             values={bulkSelectOptions}
             isDisabled={!selectedIds.length}
             onChange={onSelectModalSelect}

frontend/src/InteractiveImport/Language/SelectLanguageModal.tsx

@@ -17,7 +17,7 @@ function SelectLanguageModal(props: SelectLanguageModalProps) {
     props;
 
   return (
-    <Modal isOpen={isOpen} onModalClose={onModalClose} size={sizes.MEDIUM}>
+    <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={onModalClose}>
       <SelectLanguageModalContent
         languageIds={languageIds}
         modalTitle={modalTitle}

frontend/src/InteractiveImport/Movie/SelectMovieModalContent.tsx

@@ -64,19 +64,20 @@ interface RowItemData {
   onMovieSelect(movieId: number): void;
 }
 
-const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
-  index,
-  style,
-  data,
-}) => {
+function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
   const { items, columns, onMovieSelect } = data;
+  const movie = index >= items.length ? null : items[index];
 
-  if (index >= items.length) {
+  const handlePress = useCallback(() => {
+    if (movie?.id) {
+      onMovieSelect(movie.id);
+    }
+  }, [movie?.id, onMovieSelect]);
+
+  if (movie == null) {
     return null;
   }
 
-  const movie = items[index];
-
   return (
     <VirtualTableRowButton
       style={{
@@ -84,7 +85,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
         justifyContent: 'space-between',
         ...style,
       }}
-      onPress={() => onMovieSelect(movie.id)}
+      onPress={handlePress}
     >
       <SelectMovieRow
         id={movie.id}
@@ -97,7 +98,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
       />
     </VirtualTableRowButton>
   );
-};
+}
 
 function SelectMovieModalContent(props: SelectMovieModalContentProps) {
   const { modalTitle, onMovieSelect, onModalClose } = props;
@@ -196,9 +197,9 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
         />
 
         <Scroller
+          ref={scrollerRef}
           className={styles.scroller}
           autoFocus={false}
-          ref={scrollerRef}
         >
           <SelectMovieModalTableHeader columns={columns} />
           <List<RowItemData>