Update props of react element rendered from variable - reactjs

Question

there is a react component stored inside of a state variable. I've attached a sample code and created a codesandbox sample. As you can see, nameBadgeComponent is supposed to display {name} field from state. It works fine for the default value, but does not react to changes in name variable. Is there a way to make it work without updating the nameBadgeComponent itself?
const [name, setName] = useState("DefaultName");
const [nameBadgeComponent] = useState(<h2>My name is: {name}</h2>);
return (
<div className="App">
{nameBadgeComponent}
<button
onClick={() => {
const newName = Math.random()
.toString(36)
.substring(3);
console.log("Renamed to:", newName);
setName(newName);
}}
>
rename
</button>
</div>
);

Answer 1

You can't create a component from a useState. A state is all the properties and data that define in what condition/appearance/etc the component is. A useState allows to control a piece of information or data, but doesn't respond to changes, a component does.
The fact that you put "Component" in the name should give you a hint ;)
What you want to do is probably this :
function NameBadgeComponent({ name }) {
return <h2>My name is: {name}</h2>;
}
export default function App() {
const [name, setName] = useState("DefaultName");
return (
<div className="App">
<NameBadgeComponent name={name} />
<button
onClick={() => {
const newName = Math.random()
.toString(36)
.substring(3);
console.log("Renamed to:", newName);
setName(newName);
}}
>
rename
</button>
</div>
);
}
This will update to the changes in name properly.

Answer 2

Why are you extracting the nameBadgeComponent to a state? That is useless as it only relies on name, keeping your code as close to the original as possible:
const [name, setName] = useState("DefaultName");
const nameBadgeComponent = <h2>My name is: {name}</h2>;
return (
<div className="App">
{nameBadgeComponent}
<button
onClick={() => {
const newName = Math.random()
.toString(36)
.substring(3);
console.log("Renamed to:", newName);
setName(newName);
}}
>
rename
</button>
</div>
);
}
Context as to why it does not work: if you use useState you are defining the starting state, the code in there is never run again unless you use setState (in this case setNameBadgeComponent)
Therefore its never updated
EDIT:
The other answer defining the extra component is more reactish code, if you are going to accept an answer accept that one.