Fix Autocomplete in ChecheAwtis component

components/awtis/cheche-awtis.js

@@ -1,6 +1,6 @@
 'use client'
 
-import {useEffect, useState} from 'react'
+import {useEffect, useState, useMemo} from 'react'
 import {useRouter} from 'next/navigation'
 import TextField from '@mui/material/TextField'
 import Autocomplete from '@mui/material/Autocomplete'
@@ -49,6 +49,12 @@ export default function ChecheAwtis() {
     }
   }, [loading])
 
+  const sortedOptions = useMemo(() => {
+    return [...options].sort((a, b) =>
+      -b.firstLetter.localeCompare(a.firstLetter)
+    );
+  }, [options]);
+
   return (
     <Container
       sx={{ display: 'flex', justifyContent: 'center', marginBottom: 3 }}
@@ -62,42 +68,40 @@ export default function ChecheAwtis() {
         loadingText='Chargement...'
         noOptionsText='Aucun résultat'
         id='cheche-awtis'
-        options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
-        groupBy={option => option?.firstLetter}
-        getOptionLabel={option => option?.alias}
-        renderOption={(props, option) => (
-          <li {...props}>
-            <Avatar style={{marginRight: 8}} alt={option?.alias} src={`${IMAGE_URL}${option?.photo?.data?.attributes?.formats?.thumbnail?.url}`} />
+        options={sortedOptions}
+        groupBy={(option) => option?.firstLetter}
+        getOptionLabel={(option) => option?.alias}
+        renderOption={(props, option) => {
+          const {key, ...rest} = props;
+
+          return (
+            <li key={key} {...rest}>
+              <Avatar
+                style={{ marginRight: 8 }}
+                alt={option?.alias}
+                src={`${IMAGE_URL}${option?.photo?.formats?.thumbnail?.url}`}
+              />
               {option?.alias}
             </li>
-        )}
-        sx={{width: 300}}
-        renderInput={params => (
+          );
+        }}
+        sx={{ width: 300 }}
+        renderInput={(params) => (
           <TextField
             {...params}
             label='Rechercher un artiste'
-            InputProps={{
-              ...params.InputProps,
-              endAdornment: (
-                <>
-                  {loading ? <CircularProgress color='primary' size={20} /> : null}
-                  {params.InputProps.endAdornment}
-                </>
-              ),
+            slotProps={{
+              ...params.slotProps,
+              htmlInput: { ...params.slotProps.htmlInput },
             }}
           />
         )}
         onChange={(event, newValue) => {
-          router.push(`/awtis/${newValue.slug}`)
-        }}
-        onOpen={() => {
-          setOpen(true)
-        }}
-        onClose={() => {
-          setOpen(false)
+          router.push(`/awtis/${newValue.slug}`);
         }}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
       />
     </Container>
-
   )
 }