Estoy tratando de crear un cuadro de filtro donde el usuario pueda filtrar videos según el idioma (hindi, inglés, tamil, malayalam, árabe y tagalo). Sigo recibiendo este error: Línea 42:29: Se esperaba una asignación o llamada de función y, en cambio, vi una expresión sin expresiones no utilizadas. Estoy tratando de entender el error y por qué se muestra. Recibo el inicio del error desde el último efecto de uso que creé hasta la declaración de devolución. ¿Alguien puede explicarme el error?

Aquí está mi código:

 import { useEffect, useState } from "react"; import "./App.css"; import RadioList from "./components/RadioList"; function App() { const [data, setData] = useState([]); const [filterData, setFilterData] = useState([]); const [language, setLangauge] = useState(""); useEffect(() => { const getData = () => { fetch("radio.json", { headers: { "Content-Type": "application/json", Accept: "application/json", }, }) .then(function (response) { console.log(response); return response.json(); }) .then(function (myJson) { console.log(myJson); setData(myJson); }); }; getData(); }, []); useEffect(() => { setFilterData(data) }, [data]); useEffect(() => { setFilterData( data.filter(value => {value.language === language}) ) }, [language]); return ( <div className="mt-5 flex flex-col items-center"> <select value="Choose a Language" > {filterData.map((radioItem) => { <option language={radioItem.language}> </option> })} </select> {data.map((radioItem) => { return ( <RadioList server_url={radioItem.server_url} title={radioItem.name} language={radioItem.language} /> ); })} </div> ); } export default App;