Estoy tratando de usar un componente HOC en React con un componente funcional, pero cuando uso ganchos sigo recibiendo el error React Hook "useEffect" cannot be called inside a callback. ¿Qué estoy haciendo mal y cómo puedo solucionar esto?

 const HOC = (WrappedComponenet, entity) => { return function () { const [data, setData] = useState([]); const [term, setTerm] = useState(""); useEffect(() => { fetch(`https://jsonplaceholder.typicode.com/${entity}`) .then((res) => res.json()) .then((data) => setData(data)); }, []); let filteredData = data.slice(0, 10).filter((d) => { if (entity === "users") { const { name } = d; return name.indexOf(term) >= 0; } if (entity === "todos") { const { title } = d; return title.indexOf(term) >= 0; } }); return <WrappedComponenet data={filteredData} />; }; };