How to allow users to manually edit a label's value in React?-CodePudding

As part of my little React learning project, I have a component that fetches random fantasy names from this NPM package: https://www.npmjs.com/package/fantasy-name-generator.

Click here for the image of the random name generator

As shown above, every time you click "Randomize!", you get a new name.

Below is the code for the component:

import React from "react"

export default function TopSection(props) {
    return (
          <div className="col text-center">
            <input className="form-control" value={props.randomName}/>
            <label>{props.label}</label>
          </div>
    )
}

Below is the code for the React App

function App() {

const [x,setCharacterName] = React.useState("")
  const elfHero = nameByRace("elf", { gender: "male" })
  function randomNameGenerator(){
    return elfHero
  }

  const handleClick = () => {
    setCharacterName(randomNameGenerator)
  }

  return (

<div className="App ">
      {/* TOP SECTION */}
      <div className="container-flex">
        <div className="row mb-4 gx-3" style={{ margin: "auto" }}>
          <div className="col-12 col-lg-2 bg-light border border-danger rounded mr-3 ">
            <img src={DnDLogo} alt="dnd-logo" className="dndlogo" />

            <TopSection label="CHARACTER NAME"  randomName={elfHero}/>
            <a href="#"  onClick={handleClick}>
              Randomize