refactored react imports

src/components/sortable/DragOverlayItem/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import classNames from 'classnames';
 

src/components/sortable/SortableAudioGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import { AudioUpload } from '~/components/upload/AudioUpload';
@@ -28,7 +28,13 @@ const renderItem = ({
   onDelete?: (id: IFile['id']) => void;
   onTitleChange?: (file_id: IFile['id'], title: string) => void;
 }) => (
-  <AudioPlayer file={item} onDelete={onDelete} isEditing onTitleChange={onTitleChange} key={key} />
+  <AudioPlayer
+    file={item}
+    onDelete={onDelete}
+    isEditing
+    onTitleChange={onTitleChange}
+    key={key}
+  />
 );
 
 const renderLocked = ({ locked }: { locked: UploadStatus }) => (
@@ -49,15 +55,18 @@ const SortableAudioGrid: FC<SortableAudioGridProps> = ({
   onSortEnd,
   onTitleChange,
 }) => {
-  const renderItemProps = useMemo(() => ({ onDelete, onTitleChange }), [onDelete, onTitleChange]);
+  const renderItemProps = useMemo(
+    () => ({ onDelete, onTitleChange }),
+    [onDelete, onTitleChange],
+  );
   const renderLockedProps = useMemo(() => ({}), []);
 
   return (
     <SortableList
       items={items}
       locked={locked}
-      getID={it => it.id}
-      getLockedID={it => it.id}
+      getID={(it) => it.id}
+      getLockedID={(it) => it.id}
       renderItem={renderItem}
       renderItemProps={renderItemProps}
       renderLocked={renderLocked}

src/components/sortable/SortableGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, FC, useMemo } from 'react';
+import { createElement, FC, useMemo } from 'react';
 
 import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
 import { rectSortingStrategy, SortableContext } from '@dnd-kit/sortable';

src/components/sortable/SortableImageGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 
 import { observer } from 'mobx-react-lite';
 

src/components/sortable/SortableItem/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -18,10 +18,11 @@ const SortableItem: FC<SortableImageGridItemProps> = ({
   disabled = false,
   className,
 }) => {
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-    id,
-    disabled,
-  });
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id,
+      disabled,
+    });
 
   const style = {
     transform: CSS.Transform.toString(transform),

src/components/sortable/SortableList/index.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, FC } from 'react';
+import { createElement, FC } from 'react';
 
 import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
 import {