check it Here

import { useCallback, useState } from "react";
import "./styles.css";

const enum enumButtonTypes {
  ESPANOL = "Español",
  CANTONESE = "标准粤语"
}
const buttons = [enumButtonTypes.ESPANOL, enumButtonTypes.CANTONESE];
export default function App() {
  const [current, setCurrent] = useState<enumButtonTypes | string>("");
  const renderButton = useCallback(() => {
    switch (current) {
      case enumButtonTypes.ESPANOL:
        return <div>{enumButtonTypes.ESPANOL}</div>;
        break;
      case enumButtonTypes.CANTONESE:
        return <div>{enumButtonTypes.CANTONESE}</div>;
        break;
      default:
        return <div>default</div>;
        break;
    }
  }, [current]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {buttons.map((button) => (
        <button onClick={() => setCurrent(button)}>{button}</button>
      ))}
      <div>{renderButton()}</div>
    </div>
  );
}