Cannot override Mui-selected background Color

I'm wanna override the background color for the selected pagination item from material UI but it doesn't work properly.

Sometimes it turned to the right color but it got back to the wrong color right after I refresh the page.

Right color

Wrong color

Here is my code

export default function CustomPagination (props) {
    const _screenClass = useScreenClass(); 
    const _isBigScreen = (['lg', 'xl', 'xxl'].includes(_screenClass));
    const {
        count,
        defaultPage,
        currentPage,
    } = props;
    return <Pagination
        defaultPage={1}
        count={count}
        sx = {{
        '& .Mui-selected': {
            backgroundColor: "#f16037",
            color:'white',
            borderColor: 'transparent',
            fontSize: 16,
            height: "32px",
            width: "32px",
            borderRadius: "8px",
            },
        }}
        boundaryCount={_isBigScreen ? 2 : 1}
        siblingCount={0}
        renderItem={(item) => {
            return <PaginationItem
            components={{ previous: KeyboardDoubleArrowLeftIcon, next: KeyboardDoubleArrowRightIcon }}
            selected = {item.page == currentPage}
            {...item}
            />;
        }}
    />
}