Rendered more hooks than during the previous render. Ошибка react

Есть такой код компонента, выдает ошибку Rendered more hooks than during the previous render.

  export const DrawingElementSettings:FC<ШDrawingElementSettings> = memo(({pressedElement, setActive,active}) => {
      const [choosedTools, setChoosedTools]=useState<string>('Стиль')
      const graphic=useAppSelector(state=>state.graphics.find(gr=>gr.choosed===true)!)
      const [price1,setPrice1]=useState<number | string>(0)
      const [price2,setPrice2]=useState<number | string>(0)
      const [copyPrice1,setCopyPrice1]=useState<number | string>(0)
      const [copyPrice2,setCopyPrice2]=useState<number | string>(0)
      const [isConfirm, setIsConfirm]=useState<isActiveConfirm>({name:'',nameEl:null,active:false})
      const [isReplace, setIsReplace]=useState<isReplacement>({name:'',nameEl:null,active:false,settings:null,textSettings:null})
      const [activeSave, setActiveSave]=useState<boolean>(false)
      const classGraphic=useAppSelector(state=>state.classesGraphic[graphic.id])
      const element=classGraphic.drawingElements?.elements.find(el=>el.uuid===pressedElement.uuid)
      const [copyTextSettings]=useState<ITextData>(element!.textSettings)
      const [copyMainSettings]=useState(element!.settings)
      const name=GetNameElementTitle(element!.name)
      const ref=useRef<HTMLDivElement>(null)
      const isClicked = useRef<boolean>(false);
      const refHeader=useRef<HTMLDivElement>(null)
      const coords = useRef<{
        startX: number,
        startY: number,
        lastX: number,
        lastY: number
      }>({
        startX: 0,
        startY: 0,
        lastX: 0,
        lastY: 0
      })
      useEffect(() => {
        if (!ref.current || !refHeader.current) return;
    
        const box = ref.current;
        const header=refHeader.current
        const middle=window.innerWidth/2-box.clientWidth/2
        box.style.left=`${middle}px`;
        box.style.top='50px'
        if(box.clientHeight<window.innerHeight-310){
          const middle=window.innerHeight/2-box.clientHeight/2
          box.style.top=`${middle}px`
          coords.current.lastY = middle;
        }
        coords.current.lastX = middle;
        const onMouseDown = (e: MouseEvent) => {
          isClicked.current = true;
          coords.current.startX = e.clientX;
          coords.current.startY = e.clientY;
        }
    
        const onMouseUp = (e: MouseEvent) => {
          isClicked.current = false;
          coords.current.lastX = box.offsetLeft;
          coords.current.lastY = box.offsetTop;
        }
        const onMouseMove = (e: MouseEvent) => {
          if (!isClicked.current) return;
    
          const nextX = e.clientX - coords.current.startX + coords.current.lastX;
          const nextY = e.clientY - coords.current.startY + coords.current.lastY;
    
          box.style.top = `${nextY}px`;
          box.style.left = `${nextX}px`;
        }
    
        header.addEventListener('mousedown', onMouseDown);
        document.addEventListener('mouseup', onMouseUp);
        document.addEventListener('mousemove', onMouseMove);
        const cleanup = () => {
          header.removeEventListener('mousedown', onMouseDown);
          document.removeEventListener('mouseup', onMouseUp);
          document.removeEventListener('mousemove', onMouseMove);
          coords.current.startX = 0;
          coords.current.startY = 0;
          coords.current.lastX = middle;
          coords.current.lastY = 0;
        }
        return cleanup;
      }, [active])
      const onClose=()=>{
        setActive({active:false,flag:{isHover:false, uuid:''}})
      }
      useOutsideClick(ref,onClose,active)
      return (
        <>
          <div className={styles.wrap} ref={ref}>
            <div style={{display:'flex',alignItems:'center', padding:'20px 20px 0px 20px'}} ref={refHeader}>
              <div className={styles.header}>
                <h2>{name}</h2>
                <CreateOutlinedIcon/>
              </div>
              <div className={styles.close} onClick={onClose}>
                <CloseIcon/>
              </div>
            </div>
            <ToolsDrawingElement data={dataElements.segment.toolsOption} choosedTools={choosedTools} nameEl={element!.name} setChoosedTools={setChoosedTools}/>
            {dataElements.segment.toolsComponents[choosedTools as keyof typeof dataElements.segment.toolsComponents]({pressedElement})}
            <FooterSettingsElement pressedElement={pressedElement} setIsConfirm={setIsConfirm} choosedTools={choosedTools} copyPrice1={copyPrice1} copyPrice2={copyPrice2} setActiveSave={setActiveSave} onClose={onClose} copyMainSettings={copyMainSettings} copyTextSettings={copyTextSettings}/> 
            {activeSave && <SavePresetPopUp setActiveSave={setActiveSave} element={element!} setIsReplace={setIsReplace} />}
            {isConfirm.active && <ConfirmPopUp setActive={setIsConfirm}  isActive={isConfirm}/>}
            {isReplace.active && <ReplacePopUp setActive={setIsReplace} setActiveSave={setActiveSave} active={isReplace}/>}
          </div>
        </>
      )
    })

Проблема, думаю в этой строчке: {dataElements.segment.toolsComponents[choosedTools as keyof typeof dataElements.segment.toolsComponents]({pressedElement})}. Но как тогда исправить? Само поле toolsComponents представляет собой объект ключами которого является react компоненты, таким образом в этой строке я вовзращаю компонент, который находится в ключе объекта toolsComponents.