Page goes blank when switching to different option from dropdown

Question

I have issue with following code where i want to change from newest to oldest of dropdown.

Initially it shows newest to oldest data but when i select oldest to newest then page goes blank and Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop shows up.

My code is like this:

import { loadable, Global, css, connect, styled, decode } from "frontity";
import React, {Component} from "react";
const InfiniteListTaxNormal = loadable(() => import('./list-tax-infinite-normal'));
const InfiniteListTaxReverse = loadable(() => import('./list-tax-infinite-reverse'));

const options = [
    {
        label: "newest to oldest",
        value: "newest",
    },
    {
        label: "oldest to newest",
        value: "oldest",
    },
];

let orderState = 0;

class TaxInfiniteList extends Component {


    constructor(props) {
        super(props);
        this.state = {
            orderDefault: "newest",
        };
        this.handleChange = this.handleChange.bind(this);

    }

    handleChange = (event) => {
        event.preventDefault();
        this.setState({ orderDefault: event.target.value });

        if(event.target.value == "oldest") {
            orderState = 1;
        } else {
            orderState = 0;
        }
    }

render() {

  return (
    <div>

        <Global styles={sortTaxStyles} />
        <div className="SortContainer">
            <div className="SortLabel">
                <h3>Sorted by</h3>
            </div>
            <div className="SortSelect">
                <select value={this.state.orderDefault} onChange={this.handleChange}>
                  {options.map((option) => (
                    <option key={option.value} value={option.value}>{option.label}</option>
                  ))}
                </select>
            </div>
        </div>

        { orderState == 1 ?
            <div>
                <InfiniteListTaxReverse />
            </div>
        :
            <div>
                <InfiniteListTaxNormal />
            </div>
        }


    </div>
  );
}
};

export default TaxInfiniteList;

I can see the issue is in setState().

this.setState({ orderDefault: event.target.value });

list-tax-infinite-normal

const InfiniteListTaxNormal = ({ state, link }) => {

    // Important
    const data = state.source.get(state.router.link);

    const {
        pages,
        isFetching,
        isError,
        isLimit,
        fetchNext
    } = useArchiveInfiniteScroll({ limit: 0 });



return (
    <Container>
        {pages.map(({ Wrapper, key, link, isLast }) => (
            <Wrapper key={key}>
              <AllTax link={link}/>
            </Wrapper>
          ))}
          <ButtonContainer>
            {isFetching && <Loading />}
            {isLimit && <Button onClick={fetchNext}>Load Next Page</Button>}
            {isError && (
              <Button onClick={fetchNext}>Something failed - Retry</Button>
            )}
          </ButtonContainer>
    </Container>

  );
};

export default connect(InfiniteListTaxNormal);

list-tax-infinite-reverse

const InfiniteListTaxReverse = ({ state, link }) => {

    // Important
    const data = state.source.get(state.router.link);

    const {
        pages,
        isFetching,
        isError,
        isLimit,
        fetchNext
    } = useArchiveInfiniteScroll({ limit: 0 });

return (

    <Container>
        {pages.map(({ Wrapper, key, link, isLast }) => (
            <Wrapper key={key}>
              <AllTaxReverse link={link}/>
            </Wrapper>
          )).slice().reverse()}
          <ButtonContainer>
            {isFetching && <Loading />}
            {isLimit && <Button onClick={fetchNext}>Load Next Page</Button>}
            {isError && (
              <Button onClick={fetchNext}>Something failed - Retry</Button>
            )}
          </ButtonContainer>
    </Container>

  );
};

export default connect(InfiniteListTaxReverse);

Any help would be appreciated.