how to make an animation for horizontal movement of slider with css and react?

I am making a slider with css and react

I have two stata to show a class move the content to the left or right according to the button that is pressed

when I give the next one it advances the position I want but in the second click it returns to the original position instead of advancing

How could I keep moving forward

In addition to this when I place with the second class but with the opposite movement it seems that they cancel each other and only one works.

How could I stop this from happening?

I leave you part of the code

 const [next, setNext] = useState(true);
 const [prev, setPrev] = useState(false)
 const nextSlide = () => setNext(!next)
 const previouSide = () => setPrev(!prev)
 <>
      <BlogHearder>
        <div className='featues-header'>
          <h2 className='features-title'>Visit Our Blog</h2>
          <div className='feature-arrows'>
            <button className='feature-icon icon-left' onClick={previouSide}>
              <FiChevronLeft className='icon' />
            </button>
            <button className='feature-icon icon-right' onClick={nextSlide}>
              <FiChevronRight className='icon' />
            </button>
          </div>
        </div>
      </BlogHearder>
      <BlogCardWrapper ref={ref} >
        <div className={next ? 'blog-slider next' : 'blog-slider', prev? 'blog-slider' : 'blog-slider prev'  }>
          {state.map(blog => (
            <BlogCard key={blog.id} blog={blog} />
          ))}
        </div>
      </BlogCardWrapper>
     
    </>

I am using styled components

BlogCardWrapper = styled.div`
  width: 100%;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  .next{ 
    transform:translateX(-19%)
  }
  .prev{
    transform: translateX(19%);
  }
  .blog-slider {
    width: 250%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    transition: all 0.5s;
  }
`

for the horizontal movement to the right the class .next and to the left .prev

19% is the size of my slider cards

Thanks in advance to anyone who can help me