Estoy tratando de crear mi proyecto en React. Esta parte del proyecto consiste en una lista de elementos, cada uno tiene un botón X para eliminar ese elemento. Cada elemento es un componente de mi aplicación de reacción. Cuando se presiona el botón, configuro una variable (pasada a través de useContext) llamada setPopup, por lo que aparece una ventana emergente que le pregunta si está seguro de que desea eliminar el archivo. El problema es que cuando hago clic en el archivo, aparece este error:

 TypeError: Cannot read properties of undefined (reading 'setPopup')

Este es el código del componente:

 import '../styles/styleF.css'; import {PopupContest} from './HomePage'; import { useContext } from 'react'; const SFile = (n) => { const v = useContext(PopupContest); let currentImg = c; return <> <div className="fileSingle"> <img src={currentImg} alt="img" style={{'height':'50px', 'width':'50px','position':'relative', 'top':'5', 'left':'0'}} /> <h3>{n.name + "." + n.img}</h3> <button style={{'height':'50%', 'marginTop':'10px'}} onClick={() => {v.setPopup(6); v.setSelectFile(n.ident + "")}}>X</button> </div> </> } export default SFile;

Me gustaría saber por qué sucede esto y cómo solucionarlo correctamente. El código que efectivamente elimina el archivo está en otro archivo y componente, y funciona. Leí en algunas respuestas que debería verificar si no está definido, pero para hacer la condición de verificación, el código se rompe de todos modos. Entonces, no sé cómo manejarlo. ¿Alguien puede ayudar? Muchas gracias