Return statement isnt working and is giving an error in react js

Question

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

Here is some more info to check from-

index.js

import { useContext } from "react";
import { Modal } from "../../Providers/Modals/Modal.js";
import "./index.scss";
import logo from "./logo.png";
import {RightComponent} from "./RightComponent/index.js"
import { ModalContext } from "../../Providers/ModalProvider.js";

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

    const openCreatePlayGroundModal = () =>{
        modalFeatures.openModal("CREATE_PLAYGROUND") 
    }
    return(
        <div className="home-container">
            <div className="left-container">
            <div className="items-container">
            <img className="left-logo" src={logo} alt="Logo" />
            <h2>Version 0.0.1(Beta)</h2>
            <br></br>
            <button className="left-button" onClick={openCreatePlayGroundModal}><span class="material-symbols-outlined">chat</span> Switch To Chat(Coming Soon!)</button>
            </div>
            </div>
            <div className="right-container">
                {/* <h1 >Right wala</h1> */}
                <RightComponent />
                <Modal />
            </div>
        </div>  
    );
};

Here is the ModalProvider.js file from which it is taking and updating info

import { createContext, useState } from "react";
import { CreatePlaygroundModal } from "./Modals/CreatePlaygroundModal";

export const ModalContext = createContext();
 


export const ModalProvider = ({children}) => {

    const [modalType, setModalType] = useState(null);
 
    const closeModal = () => {
        setModalType(null)
    };
   
    const modalFeatures = {
        openModal:setModalType,
        closeModal,
        activeModal: modalType
  }

    // const modalTypes = {
    //     ["create-playground"]: CreatePlaygroundModal
    // }

    // const openModal = (type) => {
    //     setModalType(type)
    // };

    console.log({modalType});


    // const [modalType, setModalType] = useState(null);


    
 return (
    <ModalContext.Provider Value={modalFeatures}>
        {children}  
    </ModalContext.Provider>
 )
} 

Answer 1

You should check modalFeatures containing activeModal. Rewrite this code to

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