как избавиться от [eslint]warning react?

столкнулся с проблемой что у меня в консоли очень много [eslint] warnings в основном в файлах select(меню) может кто подсказать как избавиться от этих ошибок?

select:

    import React from "react";
import style from "../../select.module.scss";
import { useState, useCallback } from "react";
import { useEffect } from "react";
import axios from "axios";
import { ReactComponent as Icon } from "./Vector 55.svg";

const ButtonSelect = ({ selected, setSelected, setAuthorId }) => {
  const [select, setSelect] = useState([]);

  useEffect(() => {
    axios
      .get("https://test.Task/authors")
      .then((data) => setSelect(data.data));
  }, []);

  const changeAuthorValue = useCallback((name, id) => {
    setSelected(name);
    setAuthorId(id);
  }, []);

  const clearFilterValue = useCallback((name, id) => {
    setSelected("");
    setAuthorId("");
  }, []);

  const [isActive, setIsActive] = useState(false);

  return (
    <div className={style.select}>
      <div
        className={style.select__header}
        onClick={(e) => setIsActive(!isActive)}
      >
        <span className={style.select__current}>
          <span>{isActive && <span>{selected}</span>} Author</span>
        </span>
        <div className={style.select__iconContainer}>
          {isActive && (
            <div
              className={style.select__icon2}
              onClick={() => clearFilterValue(select.name, select.id)}
            >
              &times;
            </div>
          )}
          <div className={style.select__icon}>
            <Icon className={style.select__icon1} />
          </div>
        </div>
      </div>
      {isActive && (
        <div className={style.select__body}>
          <div className={style.select__container}>
            {select.map((item, id) => (
              <div
                className={style.select__item}
                id={id}
                onClick={() => changeAuthorValue(item.name, item.id)}
              >
                <li
                  className={style.select__itemName}
                  onClick={(e) => setIsActive(!isActive)}
                >
                  {item.name}
                </li>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default ButtonSelect;

сами ошибки,(файлов селект несколько ошибки там одинаковые поэтому мне нужен просто пример)

Line 20:6:  React Hook useCallback has missing dependencies: 'setAuthorId' and 'setSelected'. Either include them or remove 
the dependency array. If 'setSelected' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
  Line 25:6:  React Hook useCallback has missing dependencies: 'setAuthorId' and 'setSelected'. Either include them or remove 
the dependency array. If 'setSelected' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

src\components\main\dropdown\selectMenu\button2\select2.jsx
  Line 21:6:  React Hook useCallback has missing dependencies: 'setLocationId' and 'setSelected2'. Either include them or remove the dependency array. If 'setSelected2' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
  Line 26:6:  React Hook useCallback has missing dependencies: 'setLocationId' and 'setSelected2'. Either include them or remove the dependency array. If 'setSelected2' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

Ответы (0 шт):