Не рендерится массив объектов React

У меня некий список статей, который нужно отрендерить и потом отсортировать по количеству голосов и по дате публикации. Возникла проблема, что после сортировки по количеству голосов, не происходит новый рендер, то есть сам массив отсортировался, но React это не понимает этого, подскажите почему?

import React from 'react';
import './App.css';
import 'h8k-components';

import Articles from './components/Articles';

const title = "Sorting Articles";

function App({articles}) {
   const [articlesNew, setArticlesNew] = React.useState(articles);

   const sortByUpvotes = (() => {
      setArticlesNew(articles.sort((prev, next) => {
         return prev.upvotes - next.upvotes
      }))
      console.log(articlesNew)
   })

   return (
      <div className="App">
         <h8k-navbar header={title}/>
         <div className="layout-row align-items-center justify-content-center my-20 navigation">
            <label className="form-hint mb-0 text-uppercase font-weight-light"> Sort By </label>
            <button data-testid="most-upvoted-link" className="small" onClick={sortByUpvotes}>Most Upvoted</button>
            <button data-testid="most-recent-link" className="small" onClick>Most Recent</button>
         </div>
         <Articles articles={articlesNew}/>
      </div>
   );
}

export default App;

Компонент Arcticles:

import React from 'react';

function Articles({articles}) {

   return (
      <div className="card w-50 mx-auto">
         <table>
            <thead>
            <tr>
               <th>Title</th>
               <th>Upvotes</th>
               <th>Date</th>
            </tr>
            </thead>
            <tbody>
            {
               articles.map(item => {
                  return <tr data-testid="article">
                     <td data-testid="article-title">{item.title}</td>
                     <td data-testid="article-upvotes">{item.upvotes}</td>
                     <td data-testid="article-date">{item.date}</td>
                  </tr>
               })
            }
            </tbody>
         </table>
      </div>
   );

}


export default Articles;