Как повернуть svg круг при клике на пагинацию или точки на круге?

https://youtu.be/dc02CwWTwuI

пример того, как должно выглядеть действие.

и мой код, что есть сейчас.

как мне от компонента пагинации при клике на кнопки, сделать так, чтобы в компоненте DataBlock повернулся круг и зафиксировались стили ховера от точек?

в слайсе redux-toolkit у меня лежит логика для пагинации страниц, эту логику я передаю и для точек, лежащих на круге. каждая точка отвечает тоже за свою страницу.

п.с. когда пробно просто сделал анимацию беспрерывную для круга, заметил, что круг не на одном месте крутится, а как бы выходит за пределы. подскажите, что и с этим сделать. приложу стили для круга и одной из точек, лежащей на круге.

`

   const initialState: PostsState = {
currentPage: 1,
dates: {
    1: [2015, 2019],
    2: [1987, 1990],
    3: [2010, 2014],
    4: [1926, 1930],
    5: [2000, 2004],
    6: [2020, 2024]
},

};

    const postsSlice = createSlice({
name: 'posts',
initialState,
reducers: {
    setCurrentPage(state, action: PayloadAction<number>) {
        state.currentPage = action.payload;
       },
   }});

   export const { setCurrentPage } = postsSlice.actions;
   export default postsSlice.reducer

    export const DataBlock = () => {

const dispatch = useDispatch();
const currentPage = useSelector((state: RootState) => state.posts.currentPage);
const dates = useSelector((state: RootState) => state.posts.dates[currentPage]);

const goToPage = (pageNumber: number) => {
    dispatch(setCurrentPage(pageNumber));
};




       return (
    <>

        <div className='circle'>
            <svg width="530" height="530" viewBox="0 0 530 530" fill="none"
                 xmlns="http://www.w3.org/2000/svg">
                <circle  opacity="0.2" cx="265" cy="265" r="264.5" stroke="#42567A"
                         />
            </svg>
            <div  onClick={() => goToPage(1)}
            className='number-one'
            >
                <span className='number-one_number'>1</span>
                <span className='number-one_name'>Наука</span>
            </div>

            <div className='number-two' onClick={() => goToPage(2)}>
                <span className='number-two_number'>2</span>
                <span className='number-one_name'>Кино</span>
            </div>

            <div className='number-three' onClick={() => goToPage(3)}>
                <span className='number-three_number'>3</span>
                <span className='number-one_name'>Спорт</span>
            </div>

            <div className='number-four' onClick={() => goToPage(4)}>
                <span className='number-four_number'>4</span>
                <span className='number-one_name'>Психология</span>
            </div>

            <div className='number-five' onClick={() => goToPage(5)}>
                <span className='number-five_number'>5</span>
                <span className='number-one_name'>Гонки</span>
            </div>

            <div className='number-six' onClick={() => goToPage(6)}>
                <span className='number-six_number'>6</span>
                <span className='number-one_name'>Мода</span>
            </div>
        </div>

        <div className='date'>
            <span style={{color: "#5D5FEF"}}> {dates[0]}</span>
            <span style={{color: "#EF5DA8"}}> {dates[1]}</span>
        </div>
    </>

      );
   };


     
   .circle{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding-top: 215px;
color: #42567A;
svg {
    position: absolute;
}

}

   .number-one {
position: absolute;
top: -5%;
left: 40%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #42567A;
border-radius: 50%;

&_number{
    opacity: 0;
}

&_name {
    opacity: 0;
}
&:hover {
    width: 56px;
    height: 56px;
    z-index: 333;
    background-color: #FFFFFF;
    border:1px solid rgba(48, 62, 88, 0.5);
    border-radius: 30px;
    transition: .3s ease-in-out;
    .number-one_number{
        opacity: 1;
        position: absolute;
        cursor: pointer;
        top: 28%;
        left: 40%;
        font-size: 20px;
        color: #42567A;
       align-items: center;
        transition: .3s ease-in-out;
    }
    .number-one_name{
        opacity: 0;
        font-weight: bold;
        position: absolute;
        cursor: pointer;
        top: 28%;
        left: 140%;
        font-size: 20px;
        color: #42567A;
        align-items: center;
        transition: .3s ease-in-out;
    }
    &::after {
        opacity: 1;
    }
}
@media (max-width: 320px) {
    top: unset;
    bottom: 0;
    left: 40%;
    margin-bottom: 30px;
}
   }

`