Context doesn't update the value

I have a context like that

type ScanContextState = {  confirm: boolean;  toggleConfirm: () => void;};const defaultState: ScanContextState = {  confirm: false,  toggleConfirm: () => {},};export const ConfirmScanningContext =  createContext<ScanContextState>(defaultState);export const ScannigProvider: FC = ({ children }) => {  const [confirm, setConfirm] = useState(defaultState.confirm);  const toggleConfirm = () => {    setConfirm(!confirm);  };  return (<ConfirmScanningContext.Provider value={{ confirm, toggleConfirm }}>      {children}</ConfirmScanningContext.Provider>  );};

and I call the toggleConfirm in a screen when the scanning is done like that toggleConfirm();and here is the root of my app

import PaymentBottomSheet from "./PaymentBottomSheet";import MainStackNavigator from "./MainStackNavigator";import { ScannigProvider } from "./Contexts";import { ConfirmScanningContext } from "./Contexts";const Root: React.FC = () => {  const [showScan, setScan] = useState(false);  const { confirm, toggleConfirm } = useContext(ConfirmScanningContext);  return (<><ScannigProvider><IconRegistry icons={EvaIconsPack} /><ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}><NavigationContainer><MainStackNavigator              setScan={setScan}            />            {confirm && <PaymentBottomSheet setScan={setScan} />}</NavigationContainer></ApplicationProvider></ScannigProvider></>  );};export default Root;

I want to view the PaymentBottomSheet when confirm is true, however I don't know why it never gets true although I toggle it as I said before. I am new to contexts using typescript so kindly could someone explain to me why it isn't updated!