Не перерисовывается страница после обновления state react

Делаю сортировку страницы по клику на иконку, массив сортируется, добавляется в state, но страница не перерисовывается, не могу понять в чем дело.

const [data, setData] = useState<dataType[]>(dataVisiavble.dataVisiavble)

const sorted = (massive:dataType[],name:string,mode:number) =>{
    console.log("DATA", massive)
    console.log("name",name)
    console.log("method",mode)
    switch(name){
        case 'id':
            if(mode===1){
                return massive.sort((a, b) => a.id > b.id ? 1 : -1)
            }
            else{
                return massive.sort((a, b) => a.id < b.id ? 1 : -1)
            };
        case 'title':
            if(mode===1){
                return massive.sort((a, b) => a.title > b.title ? 1 : -1)
            }
            else{
                return massive.sort((a, b) => a.title < b.title ? 1 : -1)
            }
        
        default:
            return massive   
    }

}
const sortedHandler = (e:any) =>{
    console.log(e.target)
    if(e.target.classList.contains("fa")){
        e.target.classList.toggle('rotate')
        if(e.target.classList.contains("id")){
            if(e.target.classList.contains('rotate')){
                const tmp = sorted(data,'id',1)
                setData(tmp)
                console.log("seted DATA", data)
            }
            else{
                const tmp = sorted(data,'id',0)
                setData(tmp)
                console.log("seted DATA", data)
            }
        }

        if(e.target.classList.contains("title")){
            if(e.target.classList.contains('rotate')){
                const tmp = sorted(data,'title',1)
                setData(tmp)
                console.log("seted DATA", data)
            }
            else{
                const tmp = sorted(data,'title',0)
                setData(tmp)
                console.log("seted DATA", data)
            }
        }

        if(e.target.classList.contains("body")){
            if(e.target.classList.contains('rotate')){
                const tmp = sorted(data,'body',1)
                setData(tmp)
                console.log("seted DATA", data)
            }
            else{
                const tmp = sorted(data,'body',0)
                setData(tmp)
                console.log("seted DATA", data)
            }
        }
    }
}

    <div className="mainContainer">
        <div className="container">
            <div className="row">
                <div className="col-md-6 mainSearcher">
                    <input 
                        type='text'
                        name='searchText'
                        onChange={onChangeHandler}
                        className = "searched"
                        placeholder='Поиск'
                    >
                    </input>
                </div>
            </div>
        </div>
        <div className='container'>
            <div className="row">
                <Table dataVisible={data} sortedHandler={sortedHandler}/>
            </div>
        </div>
    </div>

Table.tsx

return(
    <div className="container">
        <div className="row">
            <div className="col-md-12 tableMain">
                <table className='table'>
                    <thead>
                        <tr>
                            <th scope='col'>
                                <div className="thContainer" >
                                    <span >ID</span>
                                    <i className="fa fa-angle-down id"  aria-hidden="false"  onClick={sortedHandler}></i>
                                
                                </div>
                            </th>
                            <th scope='col'>
                                <div className="thContainer" >
                                    <span>Заголовок</span>
                                    <i className="fa fa-angle-down title" aria-hidden="true" onClick={sortedHandler}></i>
                                </div>
                            </th>
                            <th scope='col'>
                                <div className="thContainer">
                                    <span>Описание</span>
                                    <i className="fa fa-angle-down body" aria-hidden="true"  onClick={sortedHandler}></i>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    {dataVisible.slice(currentPage * 10 , (currentPage * 10) + 10).map((el:dataType) =>{
                            return(<Line line={el} ></Line>)
                        })}
                        
                    </tbody>
                </table>
            </div>
        </div>
        <div className="row">
            <div className="col-md-12 paginationMain">
                <Pagination 
                    onPageChange={(page:number,e:any) => {
                        console.log("E", e.target)
                        e.target.classList.add(":active")
                        setCurrentPage(page-1)
                    
                    }}
                    totalCount={dataVisible.length}
                    pageSize={PageSize}
                    siblingCount={1}
                    currentPage= {currentPage}
                    className={''}
                />
            </div>
        </div>
    </div>
)

}