I have component which receives data from other file and setting into state:

const [sortedPlans, setSortedPlans] = useState(

    data.Plans.sort((a, b) => b.IndustryGrade - a.IndustryGrade)

  );//data is from external file

After setting the state, sorting the data and rendering the initial screen, I have function that sorts the sortedPlans whenever it is called:

const sort = (event) => {

    console.log(event);

    const newArr = sortedPlans.sort((a, b) => {

      return b[event] - a[event];

    });

    console.log(newArr);

    return setSortedPlans(newArr);

  };

The problem is that this is never triggering a re-render of the component. I want when I set the new state to be able to see it inside the jsx. Why when I console.log(newArr) the results are correctly sorted but this setting of the state not triggering re-render? Here is the sandbox:

https://codesandbox.io/s/charming-shape-r9ps3p?file=/src/App.js