Why is the component not rerendering?

Question

React

By clicking on the button, it is necessary to load the appropriate components; to solve the task, I used conditional rendering. For some reason the component is not redrawn, what could be the problem?
Below is the function used with conditional rendering:

const switchPatternTable = (text) => {
        switch (text) {
            case "1":
                return <A/>
            case "2":
                return <B/>
            case "3":
                return <C/>
            default:
                return <A/>
        }
    }

I pass the value of the button to the switchPatternTable function:

const changePatternHandler = (e) => {
        let text= e.target.value;
        switchPatternTable(text);
}
 <button
        onClick={changeTypePatternTableHandler}
        className={style.btnFilter} 
        type="button"value="1">
        lorem 
</button>

I call the switchPatternTable function in the desired section of the page:

switchPatternTable();

Answer 1

Calling switchPatternTable inside the click handler - why is it there? Moreover, the result flies to nowhere.
Calling switchPatternTable in the "necessary section of the page" - firstly, the parameter is not passed, i.e., the result will always be the same; secondly, from the shown stub it is not clear what happens next with this result.
How the working code could look like (you don’t have to think how to add a default option here).