Tengo dos botones como componentes que necesitan descargar dos archivos diferentes, pero hasta ahora ambos botones descargan el mismo archivo, lo que no me sorprende. He probado diferentes soluciones, con useState() y sin ella, pero ninguna de ellas parece funcionar. Sé que me falta lógica aquí, pero no entiendo dónde me falta. ¿Cómo descargo un archivo diferente al hacer clic en el primer botón y descargo otro archivo al hacer clic en otro botón? ¿Debería haber algo que deba recapitular también?

Aquí está el código:

Hero.js (componente principal)

 import Button from "../../components/UI/Button/Button"; const Hero = () => { return ( <div> <div> <Button>CV (English)</Button> <Button>CV (Another Language)</Button> </div> </div> ); }; export default Hero;

Button.js (componente secundario)

 import cv from "../../../assets/files/CV English.pdf"; import anotherLanguage from "../../../assets/files/anotherLanguage.pdf"; const Button = (props) => { const file = cv; return ( <button> {file === cv ? ( <a href={cv} download="CV English"> {props.children} </a> ) : ( <a href={anotherLanguage} download="CV Another Language"> {props.children} </a> )} </button> ); }; export default Button;