Bootstrap modal works perfectly if directly in HTML with its button, but doesn't respond if it's included from a React Component with dynamic inputs

Question

I want to have several modals on a page, all with unique prompts and button text. Each will be triggered by a different button and of course have a unique id. at the moment, this works just fine:

<button className="btn btn-alert text-uppercase text-center align-middle" data-toggle={'modal'}
data-target={'#nameModalDmg'}>Damage</button>
<div
      className="modal fade"
      id='#nameModalDmg'
      role="dialog"
      aria-labelledby='something'
      aria-hidden="true"
>
     <div className="modal-dialog modal-dialog-centered" role="document">
        <div className="modal-content">
          <button
            type="button"
            className="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <i className="bi bi-x"></i>
          </button>
          <div className="modal-sect pb-0">
            <h5>'Something'</h5>
          </div>
          <div className="card content-card name-card">
            <input
              id="name"
              name="name"
              placeholder="Name"
              type="number"
              min="0"
              value={value}
              onChange={e => setValue(e.target.value)}
            />
          </div>
          <button
            className="text-uppercase btn-primary modal-button"
            onClick={() => submitFunction(value)}
            data-dismiss="modal"
          >
            "Submit"
          </button>
        </div>
      </div>
</div>

However, if I try to put all of that in a component, even with the text still hardcoded in (versus some string interpolation for the id and custom values for the 'Something' text), it doesn't work at all!

const ManualEntryModal = () => {
  const [value, setValue] = useState(null);


  return (
    <div
      className="modal fade"
      id={`#nameModalDmg`}
      role="dialog"
      aria-labelledby='something'
      aria-hidden="true"
    >
      <div className="modal-dialog modal-dialog-centered" role="document">
        <div className="modal-content">
          <button
            type="button"
            className="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <i className="bi bi-x"></i>
          </button>
          <div className="modal-sect pb-0">
            <h5>Something</h5>
          </div>
          <div className="card content-card name-card">
            <FloatingLabel
              id="name"
              name="name"
              placeholder="Name"
              type="number"
              min="0"
              value={value}
              onChange={e => setValue(e.target.value)}
            />
          </div>
          <button
            className="text-uppercase btn-primary modal-button"
            onClick={() => submitFunction(value)}
            data-dismiss="modal"
          >
            Submit
          </button>
        </div>
      </div>
    </div>
  )
}
const otherThing = () => {
   return (
      <button className="btn btn-alert text-uppercase text-center align-middle" data-toggle={'modal'}
      data-target={'#nameModalDmg'}>Damage</button>
      <ManualEntryModal />
   )
}

Very clearly in the DOM the id is correct and the button is targeting the correct id for the modal. So I have no clue why putting the modal in a react component suddenly breaks it. Any ideas? I don't see why using the Bootstrap classes instead of Bootstrap React components would cause any trouble, and even then, putting the button inside the component with the modal class results in the same lack of response.

There are no errors being thrown either.