I'm developing a VOD app for TV and I'm having an issue with updating an element inside of a slide component. Basically, when a costumer focuses on any of the slides, it calls on a method that stores it's ID on state and then, one of their children checks if the stored state equals the selected item state and if so, it renders. On focusout, it sets the state to null. The weird thing is in most instances of the component this works, but some of them (and always the same instances) won't update.

PSEUDOCODE:

handleFocus(id){setFocused(id)} // Sets the id to state
handlefocusout(){setFocused(null)} // resets state
{isFocused === item.id && <div/>} // checks if state === id and renders

Me and my TL are at a loss as of why it won't work on some of the instances, and unless I'm mistaken, it's always on the same ones. Mind you, the instances' content come all from the same JSON response and are all the same in content (hence instance).