I was writing this code where I am making some Modals so I wrote this code

import { useContext } from "react"
import { ModalContext } from "../ModalProvider"
import { CreatePlaygroundModal } from "./CreatePlaygroundModal";

export const Modal = () => {
    const modalFeatures = useContext(ModalContext);

    return (
      <>{modalFeatures.activeModal === "CREATE_PLAYGROUND" && <CreatePlaygroundModal />}</>          
    );
}

Here the line is giving me an error

return (
      <>{modalFeatures.activeModal === "CREATE_PLAYGROUND" && <CreatePlaygroundModal />}</>          
    );

I dont know why this simple part isnt working
Also I am a beginner so accept my apologize if it is too petty

The Error is

TypeError: Cannot read properties of undefined (reading 'activeModal')
    at Modal (Modal.js:9:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27490:1)
    at performUnitOfWork (react-dom.development.js:26596:1)
    at workLoopSync (react-dom.development.js:26505:1)

I tried rewriting this part but it didnt help