React js SubCategory List

The category comes from the API, when you click the category, the subcategory opens, then when you click on another category, it is not deleted.

  const [id, setId] = useState();
  const [loader, setLoader] = useState(false);

  const effectRun = useRef(false);

  const categorys = useSelector(categoryData);
  const selectcategory = useSelector(selectedCategorys);
  const dispatch = useDispatch();

  const getSelect = async () => {
    const { data } = await categoryApi(
      selectcategory?.NextPath ? selectcategory?.NextPath : "null"
    );
    dispatch(addCategory(data));
  };

  const addSelect = (data) => {
    if (data.isLast == false) {
      dispatch(handleSelectedCategory(data));
    }
  };

  const category = categorys?.map((ser) => {
    return (
      <div className="flex flex-col">
        {ser?.map((cate) => {
          return (
            <div
              key={cate._id}
              onClick={() => {
                setId(cate._id);
                addSelect(cate);
              }}
              className={`w-36 flex flex-col mt-4 justify-start items-center rounded p-2 cursor-pointer text-sm font-medium text-gray-900 bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-white ${
                cate._id === id ? "bg-wh" : "bg-s"
              }`}
            >
              <span
                className={`${cate._id === id ? "text-black" : "text-black"}`}
              >
                {" "}
                {cate.Name}
              </span>
              {cate.isLast === false && (
                <div className="ml-2">
                  <AiOutlineArrowRight />
                </div>
              )}
            </div>
          );
        })}
      </div>
    );
  });

  useEffect(() => {
    if (effectRun.current == false) {
      getSelect();
    }
    return () => {
      effectRun.current = false;
    };
  }, [selectcategory]);

  return (
    <>
      <div className="w-full flex flex-col p-5">
        <div className="flex w-full justify-end">
          <AddCategory loader={loader} setLoader={setLoader} />
          <UpdateProduct loader={loader} setLoader={setLoader} />
          <Delete loader={loader} setLoader={setLoader} />
        </div>
        <h1 className="text-5xl font-extrabold mb-2">Kategori Seç</h1>
        <div className="flex flex-col w-full p-5 space-x-10">
          <div className="flex">{category}</div>
        </div>
      </div>
    </>
  );

/// Redux toolkit

import { createSlice } from "@reduxjs/toolkit/";

const initialState = {
  categorys: [],
  selectcategory: {},
};

const category = createSlice(
  {
    name: "category",
    initialState,
    reducers: {
      addCategory: (state, { payload }) => {
        state.categorys = [...state.categorys, payload];
      },
      handleSelectedCategory: (state, { payload }) => {
        state.selectcategory = payload;
      },
      clearCategorys: (state, { payload }) => {
        state.categorys = [payload];
      },
    },
  },
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default category.reducer;
export const {
  addCategory,
  handleSelectedCategory,
  categoryIsCheck,
  clearCategorys,

  addSubCategory,
} = category.actions;

export const categoryData = (state) => state.category.categorys;
export const selectedCategorys = (state) => state.category.selectcategory;