Reactjs с условным именем класса шаблона веб-пакета не работает

Я пытаюсь обновить значение компонента шаблона (tsx) с помощью метода. Но, кажется, этот метод работает. Но мой шаблон не обновляется. нужно ли добавить какую-либо конфигурацию с помощью webpack?

вот мой компонент:

import React from 'react';
import { NavLink} from "react-router-dom";

interface NaviState {
    show:boolean;
    name:string;
}

export class Header extends React.Component {
    
    state:NaviState = {
        show:false,
        name:"arif"
    }

    toggle = (e: { preventDefault: () => void; }):any =>{
        e.preventDefault();
        this.state = {name:"newname", show:!this.state.show}; //updating works
        console.info("called", this.state)
    }
    render() {
        return (
            <header>
                <h2>{"screen " + (this.state.show ? "show":"hidden")}</h2>
               <h1><a className = "hidden tantum-logo" href = "#">Welocome to Tantum website</a></h1>
               <div className = {"screen " + (this.state.show ? "show":"hidden")}></div> //not updating
               <nav className = "small">
                   <a className = "nav-icon hidden" onClick = {this.toggle} href = "#">tantum-Menu</a>
                   <h2>{this.state.name}</h2> //not updating
                 
               </nav>
            </header>
        )
    }
}

конфиг вебпака:

const HtmlPlugin = require("html-webpack-plugin");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
    watch: true,
    output:{
        path:path.resolve(__dirname, "build"),
        filename:"bundle.js",
        publicPath: ''
    },
    resolve:{
        extensions:[".ts",".tsx",".js",".jsx"]
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx|ts|tsx)$/,
                exclude:/node_modules/,
                use:[{loader:"babel-loader"}]
            },
            {
                test:/\.html$/,
                use:[{loader:"html-loader"}]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [ {loader: "file-loader",  options: {
                    name: '[path][name].[ext]'
                }}]
            },
            {
                test:/\.s[ac]ss$/i,
                use:[MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlPlugin({
            filename:"index.html",
            template:"./src/index.html"
        }),
        new MiniCssExtractPlugin(),
        new webpack.DefinePlugin({
            "process.env":{
                "NODE_ENV":JSON.stringify(process.env.NODE_ENV)
            }
        })
    ],
    devtool: 'inline-source-map',
    devServer:{
        historyApiFallback:true,
        port:5000
    }
}

🤔 А знаете ли вы, что...
С React можно использовать JSX (JavaScript XML) для описания компонентов.