I'm trying to create my project in React. This part of the project consists in a list of item, each one has a button X to delete that item. Every single item, is a component of my react app. When the button is pressed, i set a variable (passed throught the useContext) called setPopup, so a popup appears, asking if you are sure you want to delete the file. The proble is that when I click the file, this error occurs:

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

This is the code of the component:

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;

I would like to knwo why this is happening, and how to fix it correctly. The code that effectively delete the file is in other file and component, and works. I read in some answers that I should check if it is undefined, but to make the check condition, the code breaks anyway. So, I don't know how to manage it. Can someone help? Thank you so much