why it is not working to remove if it the same color name? - react-native

Question

I have a problem
My currentColor goes not to null, If I Press a color I set the color to currentColor, if the same color is again pressed then I remove the color (I set currentColor to null). but its not working
const ModalProductSizeColor = forwardRef<BottomSheetModal, IModalProductSizeColor>(({ onPress }, ref) => {
const navigation = useNavigation<NativeStackNavigationProp<RootStackParams>>();
const [currentColor, setCurrentColor] = useState<ColorsOptions | null>(null);
const [sizeScreen, setSizeScreen] = useState<boolean>(false);
const snapPoints = useMemo(() => ['25%', 250], []);
const handleSetCurrentColor = (color: ColorsOptions) => {
console.log(currentColor + 'current in func');
currentColor === color ? setCurrentColor(null) : setCurrentColor(color)
};
console.log(currentColor);
return (
<BottomSheetModal
ref={ref}
index={1}
snapPoints={snapPoints}
handleIndicatorStyle={[s.handleStyle, s.handleColorWhite]}
backdropComponent={BottomSheetBackdrop}
>
<Text style={s.title}>test</Text>
<Colors
colors={ColorsData}
onPress={handleSetCurrentColor}
onLongPress={(x) => console.log(x)}
containerStyle={s.containerStyle}
/>
<View style={s.btnContainer}>
<Pressable style={ButtonStyles.full}>
<Text style={s.btnText}>Fertig</Text>
</Pressable>
</View>
</BottomSheetModal>
)
});
In my function when I console.log currentColor its null but outside of the function it is setted , I dont check anything anymore I am very thankful for your help

Answer 1

Assuming your Colors component passes the color to your handleSetCurrentColor, you could try to set your currentColor like this
...
console.log(currentColor + 'current in func');
setCurrentColor(prevCurrentColor => prevCurrentColor === color ? null : color)
...