React conditional rendering - Why doesn't this code render anything?

I have a panel that should render list of options based on the type of query it gets through props. The query type is recognised OK but then it should map through the state and render a list of elements. But it renders nothing at all. Why is that? Thanks!

export default class SortSearchFilterPanel extends Component {
  constructor(props) {
    super(props);
    this.type = this.props.type;
    this.state = {
      sortList: [
        "What's New",
        "Name A-Z",
        "Name Z-A",
        "ABV Low To High",
        "ABV High To Low",
        "Price Low To High",
        "Price High To Low"
      ],
      filterList: ["Filter By Name", "Filter By Price"]
    };
  }

  render() {
    const { type } = this.props.type;
    const { sortList, filterList } = this.state;
    switch (type) {
      case "search":
        return (
          <div className="PanelGrid">
            <input type="text" name="serch" placeholder="Search..." />
          </div>
        );
        break;
      case "sort":
        return (
          <div className="PanelGrid">
            <ul className="PanelList">{sortList.map(item => <li key={item}>item</li>)}
            </ul>
          </div>
        );
        break;
      case "filter":
        return (
          <div className="PanelGrid">
            <ul className="PanelList">
              {filterList.map(item => <li key={item}>item</li>)}
            </ul>
          </div>
        );
        break;
      default:
        return null;
        break;
    }
  }
}