I've created a custom accordion - full working view on [codesandbox](https://codesandbox.io/s/crazy-brook-wq1vz)

Here's my `handleClick` function for when you click on each of the accordion. I needed an animation (when opening and closing the content) so this is what I tried. I'm not sure this is a React way to approach what I want to achieve.

Any suggestions on how to make this function more React-y?

```
  const handleClick = (e) => {
    e.preventDefault();

    const accordion = e.target.parentNode;
    const content = accordion.querySelector(".content");

    if (accordion.hasAttribute("open")) {
      content.style.removeProperty("max-height");
      content.classList.add("closed");
      setTimeout(() => {
        accordion.removeAttribute("open");
      }, 400);
      return;
    }
    // If the <details> element is closed, add the [open] attribute (so the content will render), and animate in
    accordion.setAttribute("open", "");
    // Get proper max-height for element for better animation
    if (!content.getAttribute("data-height")) {
      content.style.maxHeight = "none";
      content.setAttribute(
        "data-height",
        `${content.getBoundingClientRect().height}px`
      );
      content.style.removeProperty("max-height");
    }
    // Wait for the browser to apply [open] to <details>, then animate
    setTimeout(() => {
      content.classList.remove(["closed"]);
      content.style.maxHeight = content.getAttribute("data-height");
    }, 0);
  };

```