Button click changes div content according to some params

I have the code below, what i want it to do is: when i click the quizzes button , the div with renderComponent in it renders the list of quizzes as in QuizList function, when i press Members button i want the same div to render the list of members as in MemberList function, but i can't manage to do it, could you help me with it?

class GroupPage extends React.Component {
    constructor(props){
        super(props);
        this.state={
            members:[],
            quizzes:[]
        }

    }

    QuizList = () =>{
        const {quizzes} = this.state;
        return(
            <div>{
                
                quizzes.map(({id,...otherQuizProps}) => (
                            <QuizItem key={id} id={id}{...otherQuizProps}/>
                        ))
                }
            </div>
        )
    }
    MemberList = () =>{
        const {members} = this.state;
        return(
            <div>{
                members.map(({id,...otherMemberProps}) => (
                            <GroupMember key={id} id={id}{...otherMemberProps}/>
                        ))
                }
            </div>
        )
    }
    
    renderComponent = (component) =>{
        switch(component){
          case "QuizList":
            return <this.QuizList/>
          case "MemberList":
            return <this.MemberList/>
          default:
            return <this.QuizList/>
        }
      }

    

    render(){
        const {quizzes,members} = this.state;
    return(
        <div className='group-page'>
            <div className='group-controls'>
                <div className='group-buttons'>
                    <button onClick={}>Quizzes</button>
                    <button onClick={}>Members</button>
                </div>
            </div>
            <div>
                {this.renderComponent()};
            </div>
        </div>
    )}
};