Уалихан Оразбаев

Но когда я перезагружаю страницу, всё нормально удаляется из бэка и из корзины на фронте.

Это очень странно что с бэка удаляется, поскольку ты отправляешь некорректный запрос, это можно понять по его URL, вместо id передается undefined. Я бы еще проверил, а добавляется ли товар вообще в БД на бэке

Вот функция которая на onClick кнопки удаления товара с корзины повешена:

Я бы рекомендовал улучшить эту функцию следующим образом:

const onRemoveItem = async (id) => {
    try {
        await axios.delete(`https://(не смотри на мое апи).mockapi.io/cart/${id}`);
        setCartItems((prev) => prev.filter((item) => item.id !== id));
    } catch (error) {
        /* уведомлять пользователя об ошибке или логировать ее как-нибудь */
    }
  }

Тем самым мы для начала ждем ответа сервера а потом уже в случае успешного ответа сервера, удаляем карточку товара на фронт.

Ререндер компоненты происходит в трех случаях:
1) Изменения props
2) Изменения state
3) Вызов метода forceUpdate (доступно только в классовых компонентах)

Твое решение вполне адекватно:
В родительской компоненте A и B компонент сделать состояние data с задачами и создать функцию к примеру fetchData в которой при вызове получать задачи с сервера. Вызывать fetchData в useEffect для первичной загрузки данных, затем прокидывать data в компоненту B для отображения данных. В компоненту A же прокинуть функцию fetchData и вызывать ее в случае успешного создания новой задачи для обновления данных