reactjs - ¿Cómo resolver Type 'void' no es asignable al tipo 'MouseEventHandler | undefined'.ts(2322)?

Estoy trabajando en una aplicación web usando React y react-bootstrap, (en TypeScript). Quiero crear un menú desplegable en la barra de navegación para cambiar el idioma de la página. Tengo una lista de idiomas y estoy aplicando map en la lista para crear <Dropdown.Item> de esta manera:

const languageList = [
    {
        Id: "en",
        Language: "English"
    },
...
]
const [t, i18n] = useTranslation();
const [lang, setLang] = useState<string>();
useEffect(() => {
  i18n.changeLanguage(lang);
}, [lang, i18n]);

const handleClick = (lg: string) => {
    setLang(lg)
}
...
return (
  <Dropdown>
    <Dropdown.Toggle variant="outline-secondary" id="dropdown-basic">
       language
    </Dropdown.Toggle>
    <Dropdown.Menu>
       {languageList.map((item) => {
         return(
          <Dropdown.Item value={item.Id} onClick={handleClick(item.Id)>
            {item.Language}
          </Dropdown.Item>
         )
       })}
    </Dropdown.Menu>
  </Dropdown>
)

Sin el onClick={handleClick(item.Id) en la etiqueta <Dropdown.Item>, este código me da un menú desplegable así:

Sin embargo, cuando agrego onClick, me da estos errores:
Type 'void' no se puede asignar al tipo 'MouseEventHandler | undefined'.ts(2322)
y
Error no capturado: Demasiadas re-renderizaciones. React limita el número de renderizaciones para evitar un bucle infinito.

Si alguien sabe cómo arreglar esto, por favor ayúdeme.

Respuesta #1

Esta parte está mal

 <Dropdown.Item value={item.Id} onClick={handleClick(item.Id)>
     {item.Language}
 </Dropdown.Item>

Debería ser

 <Dropdown.Item value={item.Id} onClick={() => handleClick(item.Id)}>
     {item.Language}
 </Dropdown.Item>

En este momento estás intentando asignar el resultado de la función como el manejador onClick. O bien pasa la variable sin ejecución o crea una función anónima que ejecute la función que deseas. Si necesitas pasar un parámetro, tienes que usar lo último.