Users.jsx

import React from 'react'
import Hoc from './Hoc'

function Users({datas}) {
    const renderUsers=()=>{
        console.log('datas ',datas)
        return datas.map((user)=>{
            return <li key={user.id}>{user.username}</li>
        })
    }
  return (
    <>
    <div>
    <h2>Users List:</h2>
    <ul>{renderUsers()}</ul>
    </div>
    
    </>
  )
}
const SearchUsers =Hoc(Users,{url:'https://jsonplaceholder.typicode.com/users',dataType:'users'})
export default SearchUsers;

Hoc.jsx

import React,{useState,useEffect} from 'react'

function Hoc(WrappedComponent,entity) {
    const [dataList,setDataList] = useState([])
    const [term,setTerm] = useState('')

    useEffect(()=>{
        console.log('HOC')
        const fetchData =async ()=>{
            const response =await fetch(entity.url)
            const datas = await response.json();
            console.log(entity.dataType)
            console.log(datas)
            setDataList(datas.slice(0,10));
        }
        fetchData();
    },[])
    const filteredDatas = ()=>{
       let filteredDatas = []
        if(entity.dataType === 'users'){
            filteredDatas = dataList.filter((data)=>{
                return data.username.toLowerCase().indexOf(term.toLowerCase())>=0
            })
        }
        else if(entity.dataType === 'todos'){
             filteredDatas= dataList.filter((data)=>{
                return data.title.toLowerCase().indexOf(term.toLowerCase())>=0
            })
        }
        return filteredDatas;
    }
  return (
    <div>
      <div><input value={term} onChange={(e)=>setTerm(e.target.value)} /></div>
      <WrappedComponent datas={filteredDatas()}></WrappedComponent>
    </div>
  )
}

export default Hoc

When first time it is rendered on screen nothing comes and
in console following warning comes

Hoc.jsx:4 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.
TypeError: Cannot read properties of null (reading ‘useState’) at HOC/Users.jsx

when refresh the page then error comes
Cannot read properties of null (reading ‘useState’) at HOC/Users.jsx