HealSpirit

type THash = {
  id: number;
  hash: string;
};
type TChannel = {
  channelid: number;
  childrenHash: THash[];
};
type TData = TChannel[];
type THashAcc = Record<THash["hash"], THash["id"][]>;

export const comparsion = (data: TData) =>
  data.map((n) => {
    const ids = Object.values(
      n.childrenHash.reduce<THashAcc>((acc, m) => ((acc[m.hash] ??= []).push(m.id), acc), {})
    ).filter((m) => m.length > 1);

    return {
      ...n,
      childrenHash: ids.length ? ids : null,
    };
  });

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

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

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

Record<string, any>

Обновить реакт до 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

ты про это спрашивал?