Александр

Используйте React DND. Пример.

arr.reduce((acc, x) => ((acc[x.i] ??= []).push(x), acc), {})

Например так.

type FilterOptions<T> = {
  [K in keyof T]?: T[K] extends object ? FilterOptions<T[K]> : T[K];
};

const isOverlaps = <T>(entry: T, options: FilterOptions<T>): boolean => {
  const keys = Object.keys(options) as Array<keyof T>;
  
  return keys.every((key) => {
    if (typeof options[key] === 'object') {
      return isOverlaps(entry[key], options[key]!);
    }

    return entry[key] === options[key];
  });
};

const filterBy = <T>(collection: T[], options: FilterOptions<T>) => {
  return collection.filter((entry) => isOverlaps(entry, options));
};

useEffect без массива значений, за которым надо следить (dependencies), будет срабатывать при каждом рендере. Изменение состояния вызывает новый рендер, который в свою очередь вызывает useEffect.
Исправить можно так:

useEffect(() => {
    const intervalId = setInterval(() => {
        console.log("ticking");
        setNumber((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
}, []);

https://reactrouter.com/en/main/hooks/use-search-params

:class="{ [`header_comp__headline--${hlStyle||hlDefault.style}`]: true, 'first-class': data.slideType == 'brand' }"

или

:class="[`header_comp__headline--${hlStyle||hlDefault.style}`, data.slideType == 'brand' ? 'first-class' : '']"

или

:class="[`header_comp__headline--${hlStyle||hlDefault.style}`, { 'first-class': data.slideType == 'brand' }]"

или вынести в computed.

const mapOptions = (options, values) => option.map(({ option }) => {
    const usedValues = new Set();
    return {
        id: option.id,
        name: option.name,
        slug: option.slug,
        values: values.reduce((acc, { id, value }) => {
            if (id === option.id && !usedValues.has(value)) {
                usedValues.add(value);
                acc.push({ id, value });
            }

            return acc;
        }, [])
    };
});

console.log(mapOptions(options, option_values));

<form action="URL" method="POST">

h2 a {
    text-decoration: none;
}

А лучше задать класс элементу и по нему стилизовать.

Так описали же массив MovieInfo[] (все равно что Arrray<MovieInfo>), а получаете один объект.
Можно так сделать:
React.useState<MovieInfo | null>(null);
и в return'е так:
<h1>{currentMovieDetail?.id}</h1>

const filterBy = (collection, condition) => {
    const keys = Object.keys(condition);
    return collection.filter((entry) => keys.every((key) => entry[key] >= condition[key]));
};

const result = filterBy(arr, { e: 1, c: 2 });

window.pageYOffset

Не используйте CDN https://www.npmjs.com/package/socket.io

Самый лучший вариант, как мне кажется, сгруппировать все векторы и экспортировать SVG.

https://paveldogreat.github.io/WebGL-Fluid-Simulation/

- if (numberTest && emailTest && adressTest) {
+ if (numberTest() && emailTest() && adressTest()) {

ну и передать аргументы не забудьте.