szQocks

при входе на сайт, проверить localStorage на наличие accessToken , если он там есть,
в useEffect отправлять запрос на рефреш токенов ( отправлять refreshToken на получение новых токенов ), в ответ придут 2 токена ну и соответственное данные о юзере, токены сохраняем туда куда надо, а данные о юзере заносим в стейт

Ты не отфильтровываешь price , ты получаешь ссылку на отфильрованный массив, а сам price массив не изменяется.

Решение:

const deleteBaggagePrice = price = price.filter( //проверка price на наличие свойства baggageID
       (prop) => !prop.hasOwnProperty("baggageID") //если есь удалить объект
     );

Код по этой ссылке и не будет работать, код там не полный, это вершина айсберга, он возможно работал - раньше, сейчас если я не ошибаюсь то вся эта тема с nodemailer идёт через гугл, а в гугле куча мозготрёпки. Недавно я возился с этим nodemailer, пол дня ушло на то что бы настроить рассылку сообщение, могу лишь дать подсказку о том как делал я:

Я nodemailer юзал в связке с googleapis
Нужно как минимим регаться будет в гугле, создать там приложение для рассылки, связать 2 пакета nodemailer и googleapis на бэке, прокинуть в них нужны данные, например clientId - при создании приложения для рассылок - этот айдишник выдает приложение, так же где-то там взять client_secret и ещё возможно какие-то манипуляции о которых я даже и сам не помню, хотя недавно делал, в итоге должно быть что-то типа этого.

const nodemailer = require("nodemailer");
const { google } = require("googleapis");
const OAuth2 = google.auth.OAuth2;
const OAuth2_client = new OAuth2(clientId, client_secret);
OAuth2_client.setCredentials({ refresh_token: refresGoogleToken });

class MailService {
  static async sendActivationMail(to, activationLink) {
    const accessToken = await OAuth2_client.getAccessToken();

    const transporter = nodemailer.createTransport({
      service: "gmail",
      secure: false,
      auth: {
        type: "OAuth2",
        user: email,
        clientId: clientId,
        clientSecret: client_secret,
        refreshToken: refresGoogleToken,
        accessToken: accessToken, 
      },
      tls: {
        rejectUnauthorized: false,
      },
    });

    await transporter.sendMail({
      from: email,
      to,
     // и тут ниже остальная логика по созданию содержимого сообщения для почты, тут ничего ниже особенного нет

Пример

<canvas width="1000px" height="1000px"></canvas>

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d');

const drawRect = (color, x, y, width, height) => {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
  return {
    color, x, y, width, height
  }
}
   
drawRect('blue', 50, 50, 20, 20)
drawRect('black', 150, 150, 50, 150)

const drawLine = (x1,y1,x2,y2) => {
  ctx.lineWidth = '3';
  ctx.strokeStyle = 'violet';
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  ctx.lineTo(x2,y2);
  ctx.closePath();
  ctx.stroke();
}


canvas.addEventListener('click', (e) => {
  canvas.width += 0;
   
  const npc = drawRect('blue', 50, 50, 20, 20)
  const house = drawRect('black', 150, 150, 50, 150)
  drawRect('green', e.clientX, e.clientY, 20, 20)
  
  const x1 = npc.x, y1 = npc.y, x2 = e.clientX, y2 = e.clientY;

  const points = [];
  for(let i = 0.0; i <= 1; i = i+0.01){
    const gg = getPositionAlongTheLine(x1,y1,x2,y2, i);
    drawRect('aqua' ,gg.x, gg.y, 2 , 2)
    points.push({x: gg.x, y: gg.y, width: 10, height: 10})
  }
  
  for(let i = 0; i < points.length; i++){
    if(collides({...points[i], width: 2, height: 2}, house)){
      console.log('есть препятствие')
      return;
    }
  }
  drawLine(x1, y1, x2, y2)
})
  
  // отдает координаты равные проценту расстояния: percentage максимум = 1 
  function getPositionAlongTheLine(x1, y1, x2, y2, percentage) {
    return {x : x1 * (1.0 - percentage) + x2 * percentage, y : y1 * (1.0 - percentage) + y2 * percentage};
  }
 

  function collides(a,b){
      return a.x < b.x + b.width &&
             a.x + a.width > b.x &&
             a.y < b.y + b.height &&
             a.y + a.height > b.y;
  }

Я там наговнокодил немного, но это лишь потому что не хочу тебе давать лёгких решений, но если сможешь разобраться в коде - то решишь свою проблему, если этот вариант тебя устроит.

Синий - нпс
Черный - препятствие
Зеленый - игрок

Если нпс видит игрока - появляется линия между нпс и игроком.

Игрок на карте появляется при нажатии на левую кнопку мыши.

ты не повесил обработчик на Select который из "react-select"

<Select
      isClearable
      placeholder={props.placeholder}
      classNamePrefix='custom-select'
      components={{
        ClearIndicator: () => <IoCloseOutline />,
        IndicatorSeparator: () => null,
        DropdownIndicator: () => <FaCaretDown />,
      }}
      styles={customSelectStyles}
      options={props.options}
      onChange={props.onChange}
    />

ctx.fillText(text, this.x + 35, this.y + 70) // знак равно убери тут

Попробую расписать о том как работает z-index.

К примеру есть 2 дива c разным z-index, по умолчанию у них нет контекста стекирования потому что по умолчанию у них position: static; - а это позиционирование не создаёт контекст для z-index, и не важно сколько бы был z-index у .gg, нижний блок всегда будет его перекрывать, а если бы у них бы был контекст и одинаковый z-index то перекрывал бы нижний в иерархии html элемент

<div class="gg"></div>
<div class="tt"></div>

а вот и стили к ним

.gg{
  z-index: 999;
  width: 100px;
  height: 100px;
  background: red;
}

.tt{
  z-index: 2;
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: -50px;
}

Из документации сказано в каких случаях создаётся контекст стекирования
1 - является корневым элементом (то есть HTML)
2 - позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto"
3 - flex элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: flex или display: inline-flex;
4 - display: inline-flex;
5 - элементы с opacity меньше чем 1
6 - элементы с transform отличным от "none"
7 - элементы с mix-blend-mode значением отличным от "normal"
8 - элементы с filter значением отличным от "none"
9 - элементы с isolation установленным в "isolate"
10 - position: fixed;
11 - если мы указываем элементу атрибут will-change при этом не обязательно присваивать ему значения
12 - элементы с -webkit-overflow-scrolling (en-US) установленным в "touch"
13 - grid элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: grid

Если нужно что бы .gg - перекрывал нижний по иерархии html элемент, мы можем задать для .gg - один из перечисленных вариантов, например display: inline-flex; или position: relative; или же задать например родителю этих двух блоков display: flex; flex-direction: column; ( и блоки .gg .tt раз они станут флекс элементами то и z-index будет работать между ними, несмотря на то какой из них ниже а какой выше в иерархии html )

----------------------------------------------------------------------------------------------- -------------------------

Следующий пример который как раз таки возможно даст тебе понять о том как работает наконец таки z-index у детей.

Добавим потомка для дива с классом gg в данном случае это див с классом gg__children

<div class="gg">
  <div class="gg__children"></div> // потомок
</div>
<div class="tt"></div>

а вот и стили

.gg{
  width: 100px;
  height: 100px;
  background: red;
  z-index: 999;
}

.gg__children{
  width: 50px;
  height: 200px;
  background: green;
  z-index: 100;
}

.tt{
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: -50px;
  z-index: 2;
}

так вот сколько угодно можно задавать потомку z-index , он всё равно выше z-index родителя прыгнуть не сможет,
а раз его родитель .gg - не имеет свой контекст и раз он находится выше в иерархии html то и соответственно .tt перекроет их всех

Советую как можно проще его использовать но зная основные принципы , или изучать от А до Я и проникнуть в саму суть его работы.

Документация

Проблема в том что машине недостаточно оперативной памяти для запуска процесса, решить это можно двумя способами на сколько я узнал:
1 - swapfile , гуглиться очень просто к примеру - "swapfile ubuntu"
2 - расширить оперативку сменой тарифа на хосте

Можно! Но нужно помнить что хранить компонент в useState - является не хорошей практикой, это нужно учитывать, и задуматься , а действительно ли так необходимо прокидывать компонент таким образом.

Я сиськи царапал такому объекту...

https://jsfiddle.net/pg8sjfv9/

const dropDownBtns = document.querySelectorAll('.dropdown__btn');
const dropDowns = document.querySelectorAll('.filter__dropdown');

const removeAllActive = () => {
	return dropDowns.forEach(item => item.classList.remove('active'));
};

dropDownBtns.forEach(btn => {
	btn.addEventListener('click', async (e) => {
		await removeAllActive();
		e.target.parentNode.classList.add('active')
	});
});

Там надо бы еще оверлей сделать , и ловить клик по нему а не по всему документу. Но пока такой код попробуй который я тебе написал. И не забудь убрать со всех кнопок функции при клике типо myFunction1() myFunction2() и т.д

document.addEventListener('click', removeAllActive)

сначала проверь код который написал первый, если всё ок , потом попробуй это дописать , но я думаю что меню все будут закрываться при любому клике куда-либо , поэтому без оверлея не обойтись.
Потом если сделаешь оверлей или кнопки при которых нужно закрывать дропдауны, я тебе допишу код на Js.