How to correctly check for a value in react useContext and return a statement

Im currently using React.useContext to store an array with objects like this:

{
 enable: true,
 id: 1
}

I made a switch that update the value inside the array from true to false. I've done the hard work and there is a bunch of code that don't need to be explained, but I'm pretty much sure that its works because in the end, when trying to console log the result, the switcher does change the value from [true] to [false] and back to [true] with no errors.

What I'm trying to achieve is to simply return a div and change the div id from red to blue regarding if the value is [true] or [false].

The most simple way I though this could be done is:

const myComponent = () => {

     const [value, setValue] = React.useContext(ValueContext);
        
         const checkEnable = value.filter((item) => (item.id === 1)).map((Item) => (
            Item.enable
          ));

     return (
            <div id={checkEnable === true ? "red" : "bue"} > </div>
            (
    
};

I have also trying this method

const setId = (checkEnable) => {
    if (checkEnable === true) {
      return "red"
    } else {
      return "blue"
    };

  }

and returned

<div id={setId(checkEnable) >

Again, console logging the checkEnable actually does return [true] or [false] so I think there was no error with the work until this stage. But the ternary operator/statements result only [true] and the div id are not changing from red to blue. Is there something I have overseen in this code? Thanks for all suggestions.