Votaría por extraer un subcomponente para un bloque de preguntas y respuestas y manejar el estado expandido allí. Esto también solucionará la duplicación de código en su código.

 import styles from '../styles/FAQs.module.css' import {useState} from 'react'; const FAQ = ({question = "", answer = ""}) => { const [isToggled, setIsToggled] = useState(false); const onToggle = () => { isToggled ? setIsToggled(false) : setIsToggled(true); } return <div className={styles.accordionItem}> <button id="accordion-button-1" aria-expanded={isToggled} onClick={onToggle}> <span className={styles.accordionTitle}>{question}</span> <span className={styles.icon} aria-hidden="true"></span> </button> <div className={styles.accordionContent}> <p>{answer}</p> </div> </div> } export default FAQ

 import styles from '../styles/FAQs.module.css' import FAQ from "./FAQ.js" const FAQs = () => <div class={styles.container}> <div class={styles.accordion}> <FAQ key="faq-1" question={"Why is the moon sometimes out during the day?"} answer={"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor " + "incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. " + "Ut tortor pretium viverra suspendisse potenti."}/> <FAQ key="faq-2" question={"Why is the sun sometimes out during the night?"} answer={"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor " + "incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. " + "Ut tortor pretium viverra suspendisse potenti."}/> </div> </div> export default FAQs

Los fragmentos de código duplicados en su JSX suelen ser una señal de que debe extraerlos. En su caso, la extracción también corrige el error ya que cada pregunta frecuente tiene su propio estado. Además, lo ayudará a evitar problemas debido a errores de copiar y pegar.

En otra mejora, podría tener las preguntas y respuestas en una matriz e iterar sobre ellas en el JSX del componente de preguntas frecuentes. Con eso, podría separar los datos de la representación.

El problema con su código es que tiene varias FAQs , pero solo tiene one state y one function para manejar todas las FAQs , por lo que cuando hace clic en una pregunta frecuente, todas las preguntas frecuentes se activarán porque tiene un estado para todas ellas.

Así que cree un estado individual para todas las preguntas frecuentes.

 import styles from '../styles/FAQs.module.css' import {useRef, useEffect, useState} from 'react'; const FAQs = () => { const [isToggled1, setIsToggled1] = useState(false); const [isToggled2, setIsToggled2] = useState(false); const toggler1 = () => { isToggled1 ? setIsToggled1(false) : setIsToggled1(true); } const toggler2 = () => { isToggled2 ? setIsToggled2(false) : setIsToggled2(true); } return ( <div class={styles.container}> <div class={styles.accordion}> <div class={styles.accordionItem}> <button id="accordion-button-1" aria-expanded={isToggled1} onClick={toggler1}> <span class={styles.accordionTitle}>Why is the moon sometimes out during the day?</span> <span class={styles.icon} aria-hidden="true"></span> </button> <div class={styles.accordionContent}> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti. </p> </div> </div> <div class={styles.accordionItem}> <button id="accordion-button-1" aria-expanded={isToggled2} onClick={toggler2}> <span class={styles.accordionTitle}>Why is the moon sometimes out during the day?</span> <span class={styles.icon} aria-hidden="true"></span> </button> <div class={styles.accordionContent}> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti. </p> </div> </div> </div> </div> ) } export default FAQs

Debe almacenar el estado de alternancia para todas las secciones/acordeones por separado en un mapa/objeto o una matriz o varias variables de estado y alternar en la que se hace clic.

 import styles from '../styles/FAQs.module.css' import {useRef, useEffect, useState} from 'react'; const FAQs = () => { const [accordionStatus, setAccordionStatus] = useState({ accordion1: false, accordion2: false }); const toggler = (name) => { setAccordionStatus({ ...accordionStatus, [name]: !accordionStatus[name]); } return ( <div class={styles.container}> <div class={styles.accordion}> <div class={styles.accordionItem}> <button id="accordion-button-1" aria-expanded={accordionStatus.accordion1} onClick={() => toggler(accordion1)}> <span class={styles.accordionTitle}>Why is the moon sometimes out during the day?</span> <span class={styles.icon} aria-hidden="true"></span> </button> <div class={styles.accordionContent}> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti. </p> </div> </div> <div class={styles.accordionItem}> <button id="accordion-button-1" aria-expanded={accordionStatus.accordion2} onClick={() => toggler(accordion2)> <span class={styles.accordionTitle}>Why is the moon sometimes out during the day?</span> <span class={styles.icon} aria-hidden="true"></span> </button> <div class={styles.accordionContent}> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti. </p> </div> </div> </div> </div> )} export default FAQs