Creating Accordion in React using Data Attribute Properties, using tailwindcss

Question

I'd like to implement an accordion component using data attribute properties. I've seen examples of using JavaScript and state variables, but I'm interested in achieving this using data attributes for a more declarative approach. Can someone guide me on how to achieve this?

I can achieve this by using state variables and using document.querySelectorAll('[aria-controls]'); I have also know the tailwindcss way that they have shared on docs

<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

but I am looking for something more simpler like :

 <div>
      <h1
        id="header1"
        aria-controls="paragraph1"
        aria-label="Toggle paragraph"
        tabIndex="0"
      >
        Click me to reveal the paragraph!
      </h1>
      <p id="paragraph1" style={{ display: 'none' }}>
        This paragraph was initially hidden.
      </p>
    </div>