Как правильно обновить данные в d3?

[gsdev99]

Всем привет. Подскажите, пожалуйста, как правильно решить следующую задачу. У меня есть график, по оси y при перерендере приходит точка, по которой я отрисовываю оранжевую горизонтальную линию. Сейчас проблема в следующем при изменении состояния у меня не перерисовывается линия, а как бы запоминается предыдущее состояния и дорисовывается. Если нажать на button3, а затем на button2, данный баг виден. Перерисовка реализуется в компоненте Axis. Буду благодарен вашей помощи.
https://codepen.io/gsdev99/pen/dyoMQmZ
Фактически ошибка в этом компоненте:

const Axis = ({ scale, orient, transform, width, tickSelected }) => {
  
    const ref = useRef(null)

    const renderAxis = () => {
        let axis = null

        if (orient === 'bottom') {
            axis = d3.axisBottom(scale)
        }

        if (orient === 'left') {
            axis = d3.axisLeft(scale)
        }

        d3.select(ref.current).call(axis)
    }

    const updateAxis = () => {

        if (orient === 'left') {
          
          if (!tickSelected) {
              
          }
          
          console.log('tickSelected', tickSelected)
          
            const axis = d3
                .axisLeft(scale)
                .tickSize(-width)

            const g = d3.selectAll(`.${orient}`)
                .call(axis)
            
            g
                .selectAll('.tick line')
                .filter((d) => {
                    if (d === tickSelected) {
                        return d === tickSelected
                    }

                    if (d === tickSelected) {
                        return d === tickSelected
                    }

                    return null
                })
                .attr('class', 'is-active')
        }

        if (orient === 'bottom') {
          
            const axis = d3
                .axisBottom(scale)
                .ticks(2)
             
            d3.select(ref.current)
                .call(axis)
        }
    }

    useEffect(() => {
        renderAxis()
    }, [])


    useEffect(() => {
        updateAxis()
    })

    return (
        <g
            ref={ref}
            transform={transform}
            className={`${orient} axis`}
        />
    )
}