Is it possible to update the color of a custom node by ID in react-flow?

As the documentation states I am passing the props needed for custom nodes and using the nodeId prop to change the color of my nodes on click. My current workflow changes the color of all the nodes instead of just the one I clicked.

How can I change the color of the custom Node that I click?

My current workflow is as follows.

const [customNodeStyles, setNodeStyles] = useState({
    background: 'black',
    padding: 10,
    borderRadius: 50,
    width: 10,
    height: 10
});

const onElementClick = (event, element) => {
    setNodeBg('red');
    setNodeId(element.id);
}

useEffect(() => {
    setNodeStyles({ ...customNodeStyles, background: nodeBg });

}, [nodeId, nodeBg]);

return (
    <div style={{ height: 1000, width: 1000 }}>
        <ReactFlow
            elements={elements}
            nodeTypes={{ special: CustomNodeComponent }}
            nodeTypesId={nodeId}
            onElementClick={onElementClick}
            defaultZoom={1.5}
            minZoom={0.2}
            maxZoom={4}>
        </ReactFlow>
    </div>
);