HealSpirit

sort() сохраняет ссылку на старый массив. toSorted() возвращает новую ссылку на массив. Только новая ссылка позволяет понять реакту, что надо ререндерить компонент.
Использовать надо toSorted() или

setAllTODOS([...sortedTodos]);
setAllTODOS((prevTodos) => [...sortedTodos]);

typescript используете?
Если создаете контекст как объект, то и передавать и использовать нужно как объект:

export const AuthContext = createContext({})

<AuthContext.Provider value={{currentUser, setCurrentUser}}>  // тут нельзя использовать квадратные скобки при передаче значения

const {currentUser, setCurrentUser} = useContext(AuthContext) // тут нельзя использовать квадратные скобки при деструктуризации

А если как массив

export const AuthContext = createContext([])

<AuthContext.Provider value={[currentUser, setCurrentUser]}>  // тут нельзя использовать фигурные скобки при передаче значения

const [currentUser, setCurrentUser] = useContext(AuthContext) // тут нельзя использовать фигурные скобки при деструктуризации

Например, для массива фиксированной длинный это выглядело бы так

import {
  createContext,
  useContext,
  useState,
  type FC,
  type Dispatch,
  type SetStateAction,
} from "react";

type TAuthContext = [string | null, Dispatch<SetStateAction<string>> | null];

export const AuthContext = createContext<TAuthContext>([null, null]);

export const Form: FC = () => {
  const [currentUser, setCurrentUser] = useContext(AuthContext);

  return <>1</>;
};

export const App: FC = () => {
  const [currentUser, setCurrentUser] = useState<string | null>(null);

  return (
    <>
      <AuthContext.Provider value={[currentUser, setCurrentUser]}>
        <Form />
      </AuthContext.Provider>
    </>
  );
};

Думаю, как сделать в виде объекта, сами разберетесь

У вас в тег li идет деструктуризация объекта sort, не все ключи которого являются валидными аттрибутами.

<li
{...sort}
>

Из валидного там только name. Его можно передать напрямую

<li
name={sort.name}
>

либо убрать все невалидные атрибуты

const {sortProperty, ...rest} = sort;

<li
{...rest}
>

const updateSearch: ChangeEventHandler<HTMLInputElement> = (event) => {};
или
const updateSearch = (event: ChangeEvent<HTMLInputElement>) => {};

Как это получить? Кликнуть с зажатым левым ctrl левой кнопки мыши в vscode на onChange
Попадем в типы реакта и увидим:
onChange?: ChangeEventHandler<T> | undefined;
Поймем, что ChangeEventHandler это функция, которая принимает в качестве параметра event с определенным типом (думаю пока этого достаточно, там потом можно потеряться что дальше происходит)

Т.к sort НЕ возвращает новую ссылку на массив а сортирует текущий реакт не тригерит ререндер. Ререндер из-за чего то другого происходит. Попробуй

setMatched(findInput.matchFound.sort((first, second) => first.price[0] - second.price[0]));

заменить на

setMatched([...findInput.matchFound.sort((first, second) => first.price[0] - second.price[0])]);

Т.к redux-toolkit использует immer, то можно так попробовать

state.data.splice(state.data.findIndex((el) => el.id === action.payload.id), 1, action.payload)

Будет ли меняться ссылка на массив и как на это смотрит redux-toolkit, не могу сказать, с toolkit не работал

Обновить реакт до 18 версии или установить react-testing-library v12.1.5

import React from "react";
import { Products } from "../Products";

class Main extends React.Component {
  state = {
    products: [],
  };

  componentDidMount() {
    fetch("./products.json")
      .then((responce) => responce.json())
      .then((data) => this.setState({ products: Object.values(data) }));
  }

  render() {
    const { products } = this.state;

    return (
      <main className="container content">
        <Products products={products} />
      </main>
    );
  }
}

export { Main };

Странный json, если честно. Обычно, такие вещи хранятся в массиве у какого-то поля в JSON.
Надо бы еще убрать элемент массива 200, который получился после преобразования "response_code": 200 -> 200,
убрать 2 предупреждения в консоли:
1) немного поменялась инициализация приложения после перехода на 18 версию реакта
2) если распечатываешь компоненты из массива, нужно каждому элементу добавить атрибут/свойство key. Использовать надо какое-то уникальное значение (например, id). Если его нет, на крайняк использовать index текущей итерации

class OurCoffee extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        { name: "AROMISTICO Coffee 1 kg", country: "Brazil", price: 6.99 },
        { name: "AROMISTICO Coffee 1 kg", country: "Kenya", price: 6.99 },
        { name: "AROMISTICO Coffee 1 kg", country: "Columbia", price: 6.99 }
      ],
      term: ""
    };
  }

  commitInputChanges = (e) => {
    this.setState({ term: e.target.value });
  };

  render() {
    const { data, term } = this.state;

    return (
      <div>
        <div className="filter">
          <div className="filter_first">
            <h2>Looking for</h2>
            <input
              type="text"
              placeholder="start typing here"
              onChange={this.commitInputChanges}
            />
          </div>
        </div>
        {data
          .filter((item) =>
            item.country.toLowerCase().includes(term.toLowerCase())
          )
          .map((item) => (
            <div key={item.country} className="product">
              <img src={"coffee"} alt="" />
              <h2 className="item_name">{item.name}</h2>
              <h2 className="item_from">{item.country}</h2>
              <h2 className="item_price">{item.price}</h2>
            </div>
          ))}
      </div>
    );
  }
}

export default OurCoffee;

Что такое MouseEventHandler? Эта функция, которая принимает в качестве аргумента event c типом MouseEvent и возвращает пустоту

У вас функция handleChangeInfoMain типизирована как MouseEventHandler, хотя аргумент типизируется как string

Попробуйте вот так:
handleChangeInfoMain: (value: string) => void