Почему в функции selectTab не выводится id

import { Box, Flex, Icon } from '@chakra-ui/react'
import React, { useEffect, useLayoutEffect, useState } from 'react'
import { RiAddLine } from 'react-icons/ri'
import EmptyTab from './components/EmptyTab'
import TabItem from './components/TabItem'
import { useDispatch } from 'react-redux'
import { setActiveFilters, setBlockSelectionMode } from '../../store/ganttSlice'
import {
    setActiveTabInfo,
    setAdditionalActiveTabInfo,
    setAdditionalUserInference,
} from '../../store/mainLayoutSlice'
import { DndContext, closestCenter } from '@dnd-kit/core'
import {
    SortableContext,
    arrayMove,
    horizontalListSortingStrategy,
} from '@dnd-kit/sortable'
import SortableItem from './SortableItem'
import { useResizeObserver } from './helpers/useResizeObserver'
import {
    ADD_TAB_BTN_INNER_WIDTH,
    ADD_TAB_RESERVED_SPACE,
    TAB_MAX_WIDTH,
    TAB_MIN_WIDTH,
} from './tabConstants'

const Tabs = props => {
    const {
        databaseState, // FIXME: try to search another way
        initialState,
        showAddTabBtn = true,
        emptyTab,
        setTabs: setTabsOwner = () => {},
        type,
        ...rest
    } = props
    const dispatch = useDispatch()
    const [tabs, setTabs] = useState([])
    const [tabId, setTabId] = useState(null)
    const [currentTab, setCurrentTab] = useState({
        component: emptyTab || EmptyTab,
    })

    const [containerRef, containerWidth] = useResizeObserver()

    const tabCount = tabs.length
    const availableWidth =
        containerWidth - (showAddTabBtn ? ADD_TAB_RESERVED_SPACE : 0)

    const calculatedTabWidth =
        tabCount > 0
            ? Math.max(
                  TAB_MIN_WIDTH,
                  Math.min(TAB_MAX_WIDTH, availableWidth / tabCount)
              )
            : 0

    useLayoutEffect(() => {
        setTabs([])
        initialState.forEach(tab => {
            addTab(tab)
        })
    }, [initialState])

    useEffect(() => {
        setCurrentTab(tabs.find(tab => tab.id === tabId))
    }, [tabId])

    useEffect(() => {
        if (currentTab) {
            type
                ? dispatch(
                      setAdditionalActiveTabInfo({
                          id: currentTab.id,
                          name: currentTab.name,
                          ganttType: currentTab.ganttType ?? null,
                      })
                  )
                : dispatch(
                      setActiveTabInfo({
                          id: currentTab.id,
                          name: currentTab.name,
                          ganttType: currentTab.ganttType ?? null,
                      })
                  )
        } else {
            dispatch(setActiveTabInfo(null))
        }
    }, [currentTab])

    const addTab = tab => {
        const newTab = {
            additionalInfo: tab.additionalInfo ?? null,
            name: tab.name,
            id: tab.id,
            component: tab.component,
            ganttType: tab.ganttType ?? null,
        }
        setTabId(newTab.id)
        setTabs(prev => [...prev, newTab])
    }

    const removeTab = id => {
        if (
            currentTab.name === 'Диаграмма Ганта - Заказы' ||
            currentTab.name === 'Диаграмма Ганта - Персонал'
        ) {
            dispatch(setActiveFilters(null))
            dispatch(setBlockSelectionMode(false))
            //dispatch(setAdditionalUserInference(null))
        }
        if (tabId === id) {
            dispatch(setActiveTabInfo(null))
        }
        setTabId(
            tabs.length - 1 ? tabs.filter(tab => tab.id !== id)[0].id : null
        )
        setTabsOwner(tabs.filter(tab => tab.id !== id))
    }

    const selectTab = id => {
        console.log('id', id)

        setTabId(id)
    }

    const handleDragEnd = event => {
        const { active, over } = event
        if (!over || active.id === over.id) return
        setTabs(tabs => {
            const oldIndex = tabs.findIndex(tab => tab.id === active.id)
            const newIndex = tabs.findIndex(tab => tab.id === over.id)
            return arrayMove(tabs, oldIndex, newIndex)
        })
    }
    return (
        <Flex
            position={'relative'}
            direction='column'
            borderRadius='20px'
            overflow='hidden'
            flex='1'
            bg='#FFFFFF'
            {...rest}
        >
            <Flex
                align='center'
                h='32px'
                bg='bia.neutral.600'
                borderBottom='1px solid #EAEEF4'
                ref={containerRef}
            >
                <Box
                    width='100%'
                    pt='4px'
                >
                    <DndContext
                        onDragEnd={handleDragEnd}
                        collisionDetection={closestCenter}
                    >
                        <SortableContext
                            items={tabs?.map(tab => tab.id)}
                            strategy={horizontalListSortingStrategy}
                        >
                            <Flex align='center'>
                                {tabs.map(tab => (
                                    <SortableItem
                                        key={tab.id}
                                        id={tab.id}
                                        name={tab.name}
                                        isSelected={tabId === tab.id}
                                        onClose={() => removeTab(tab.id)}
                                        onClick={() => selectTab(tab.id)}
                                        width={calculatedTabWidth}
                                    />
                                ))}
                                {tabs.length > 0 && showAddTabBtn && (
                                    <Flex
                                        w={`${ADD_TAB_BTN_INNER_WIDTH}px`}
                                        alignItems='center'
                                        justifyContent='center'
                                        mx='8px'
                                        mb='1px'
                                        onClick={() => {
                                            setCurrentTab(emptyTab || EmptyTab)
                                            setTabId(null)
                                        }}
                                        borderRadius='4px'
                                        bg='transparent'
                                        _hover={{
                                            cursor: 'pointer',
                                            bg: 'bia.neutral.300',
                                        }}
                                        p='2px'
                                        transition='all 0.3s ease'
                                    >
                                        <Icon
                                            as={RiAddLine}
                                            w='20px'
                                            h='20px'
                                            color='bia.neutral.800'
                                        />
                                    </Flex>
                                )}
                            </Flex>
                        </SortableContext>
                    </DndContext>
                </Box>
            </Flex>

            <Box flex='1'>
                {((tabs.length === 0 || !currentTab?.component) &&
                    (emptyTab || <EmptyTab />)) || (
                    <Box
                        key={currentTab.id}
                        overflow='hidden'
                        h='100%'
                    >
                        {React.createElement(currentTab.component, {
                            databaseState,
                            name: currentTab.name,
                            additionalInfo: currentTab.additionalInfo,
                        })}
                    </Box>
                )}
            </Box>
        </Flex>
    )
}

export default Tabs

{
    /* <DragDropContext
                        onDragEnd={onDragEnd}
                        onDragStart={onDragStart}
                    >
                        <Droppable
                            droppableId='droppable'
                            direction='horizontal'
                        >
                            {provided => (
                                <Flex
                                    alignItems={'end'}
                                    overflowY='auto'
                                    h='100%'
                                    sx={{
                                        '::-webkit-scrollbar': {
                                            display: 'none',
                                        },
                                    }}
                                    ref={provided.innerRef}
                                    {...provided.droppableProps}
                                >
                                    {tabs.map((tab, index) => {
                                        return (
                                            <Draggable
                                                key={tab.id}
                                                draggableId={tab.id}
                                                index={index}
                                            >
                                                {provided => (
                                                    <TabItem
                                                        innerRef={
                                                            provided.innerRef
                                                        }
                                                        {...provided.draggableProps}
                                                        {...provided.dragHandleProps}
                                                        key={index}
                                                        isSelected={
                                                            tabId === tab.id
                                                        }
                                                        onClose={() =>
                                                            removeTab(tab.id)
                                                        }
                                                        onClick={() => {
                                                            selectTab(tab.id)
                                                        }}
                                                        // _first={{
                                                        //     ml: '8px',
                                                        // }}
                                                    >
                                                        {tab.name}
                                                    </TabItem>
                                                )}
                                            </Draggable>
                                        )
                                    })}
                                    {tabs.length > 0 && showAddTabBtn && (
                                        <Draggable
                                            draggableId={
                                                showAddTabBtn === false
                                                    ? 'minus'
                                                    : 'plus'
                                            }
                                            index={99999999}
                                            isDragDisabled={true}
                                        >
                                            {provided => (
                                                // <IconButton
                                                //     width='28px'
                                                //     minW='28px'
                                                //     height='28px'
                                                //     marginX='8px'
                                                //     variant={'bia.addTab'}
                                                //     ref={provided.innerRef}
                                                //     {...provided.draggableProps}
                                                //     {...provided.dragHandleProps}
                                                //     onClick={() => {
                                                //         setCurrentTab(
                                                //             emptyTab || EmptyTab
                                                //         )
                                                //         setTabId(null)
                                                //     }}
                                                //     icon={
                                                //         <FilterIcon
                                                //             as={RiAddLine}
                                                //         />
                                                //     }

                                                // />

                                                <Flex
                                                    alignItems={'center'}
                                                    justifyContent={'center'}
                                                    ml='8px'
                                                    mb='1px'
                                                    ref={provided.innerRef}
                                                    {...provided.draggableProps}
                                                    {...provided.dragHandleProps}
                                                    onClick={() => {
                                                        setCurrentTab(
                                                            emptyTab || EmptyTab
                                                        )
                                                        setTabId(null)
                                                    }}
                                                    borderRadius='4px'
                                                    bg='transparent'
                                                    _hover={{
                                                        cursor: 'pointer',
                                                        bg: 'bia.neutral.300',
                                                    }}
                                                    p='2px'
                                                    transition='all 0.3s ease'
                                                >
                                                    <Icon
                                                        as={RiAddLine}
                                                        w='20px'
                                                        h='20px'
                                                        color={
                                                            'bia.neutral.800'
                                                        }
                                                    />
                                                </Flex>
                                            )}
                                        </Draggable>
                                    )}
                                    {provided.placeholder}
                                </Flex>
                            )}
                        </Droppable>
                    </DragDropContext> */
}

import { Box, Flex, Icon, Text } from '@chakra-ui/react'
import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import React from 'react'
import { RiCloseLine } from 'react-icons/ri'
import { Tooltip } from '../ui/tooltip'
import { TAB_MAX_WIDTH, TAB_MIN_WIDTH } from './tabConstants'

const SortableItem = ({ id, name, isSelected, onClose, width, onClick}) => {
    const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        isDragging,
        transition: defaultTransition,
    } = useSortable({ id })

    const smoothTransition = defaultTransition
        ? `transform 350ms cubic-bezier(0.165, 0.84, 0.44, 1)`
        : undefined

    const style = {
        transform: CSS.Translate.toString(transform),
        transition: smoothTransition,
        zIndex: isDragging ? 10 : undefined,
    }

    const showEllipsisOnly = width <= TAB_MIN_WIDTH
    return (
        <Tooltip
            content={name}
            disabled={width >= TAB_MAX_WIDTH}
        >
            <Flex
                ref={setNodeRef}
                {...attributes}
                {...listeners}
                style={style}
                borderTopLeftRadius='20px'
                borderTopRightRadius='20px'
                p='4px 8px 4px 12px'
                align='center'
                cursor={!isSelected ? 'pointer' : 'grab'}
                bg={isSelected ? '#FFFFFF' : 'bia.neutral.400'}
                gap='4px'
                _hover={{
                    bg: 'bia.neutral.300',
                }}
                onClick={onClick}
                maxWidth={`${width}px`}
                minWidth='0'
            >
                <Text
                    fontSize='14px'
                    lineHeight='20px'
                    whiteSpace={showEllipsisOnly ? 'normal' : 'nowrap'}
                    fontWeight='350'
                    overflow='hidden'
                    textOverflow={showEllipsisOnly ? 'clip' : 'ellipsis'}
                    flex='1'
                >
                    {showEllipsisOnly ? '...' : name}{' '}
                </Text>
                <Flex
                    padding='3px'
                    onClick={e => {
                        e.stopPropagation()
                        onClose()
                    }}
                    cursor='pointer'
                    borderRadius='4px'
                    background='transparent'
                    _hover={{
                        background: 'bia.neutral.600',
                    }}
                    pointerEvents='auto'
                    transition='all 0.3s ease'
                >
                    <Icon
                        w='14px'
                        h='14px'
                        as={RiCloseLine}
                        color={isSelected ? 'bia.black.800' : 'bia.neutral.800'}
                        transition='all 0.2s ease'
                        _hover={{
                            color: 'bia.black.800',
                        }}
                    />
                </Flex>
            </Flex>
        </Tooltip>
    )
}

export default SortableItem