Сортировка столбцов в react

Всем привет! Выгружаю товары (массив объектов) из базы и отрисовываю список. Сортировать массив получается, но компонент не перерендеривается, то есть строки не перерисовываются при сортировке "data" . В чем причина, подскажите пожалуйста

export const GoodsList = () => {
/*localeCompare*/
const [data, setData] = useState([]);
const getAllGoods = async () => {
    const response = await axios.get(urls.default + "/allGoods");
    // console.log(response.data);
    setData(response.data);
};

const sortToSort = (x, y) => {
    return x.brand.localeCompare(y.brand, "en");
};

useEffect(() => {
    getAllGoods();
}, []);
return (
    <div className="wrapper__goods-list">
        <h3>Общий список товаров в базе</h3>
        <div className="goods-titles">
            <div className="goods-titles__item">Артикул</div>
            <div
                className="goods-titles__item"
                onClick={() => {
                    setData(data.sort(sortToSort));
                }}
            >
                Бренд
            </div>
            <div className="goods-titles__item">Линейка</div>
            <div className="goods-titles__item">Вкус</div>
            <div className="goods-titles__item">Категория</div>
            <div className="goods-titles__item">Подкатегория</div>
            <div className="goods-titles__item">Ед. измерения</div>
            <div className="goods-titles__item">Кл-во в уп.</div>
            <div className="goods-titles__item">Д/ Ш/ В/ О</div>
            <div className="goods-titles__item"></div>
        </div>
        <div className="goods-list">
            {data.map((item) => {
                return (
                    <div className="goods-list__good" key={item._id}>
                        <div className="goods-list__good-discription">
                            {item.vendorCode}
                        </div>
                        <div className="goods-list__good-discription">
                            {item.brand}
                        </div>
                        <div className="goods-list__good-discription">
                            {item.nameSerias}
                        </div>
                        <div className="goods-list__good-discription">
                            {item.taste}
                        </div>
                        <div className="goods-list__good-discription">
                            {item.category}
                        </div>
                        <div className="goods-list__good-discription">
                            {item.subcategory}
                        </div>
                        <div className="goods-list__good-discription">
                            {item.numberSystem}
                        </div>
                        <div className="goods-list__good-discription">
                            {item.pack}
                        </div>
                        <div className="goods-list__good-discription">
                            {item.goodLength}|{item.goodWidth}|
                            {item.goodHeight}|{item.volumePack}
                        </div>
                        <img
                            className="item-img"
                            src={item.imgPath}
                            alt={item.brand}
                        />
                        {item.goodApproved ? (
                            <div className="goods-list__good-discription approved">
                                Утверждено
                            </div>
                        ) : (
                            <div className="goods-list__good-discription none-approved">
                                Утвердить!!
                            </div>
                        )}
                    </div>
                );
            })}
        </div>
    </div>
);

};