如何修改CSS属性onClick ReactJS

我想更改两个元素的不透明度和指针事件，当我单击另一个元素时，我进行了搜索，并且我可以使用const更改样式和setState的不透明度（我还没有完全了解），但这很难否在指针事件上。我最终写了JQuery，因此您可以更好地了解我想做什么。

const App = () => {

  const iluminar = () => {
    $('#oscurecido').css("opacity", 0);
    $('#oscurecido').css("pointer-events", "none");
    $('#sesion').css("opacity", 0);
    $('#sesion').css("pointer-events", "none");
  }

  return (
    <div className="App">
      <div id="oscurecido" onClick={iluminar}></div>
      <Router>
        <Nav/>
        <Switch>
          <Route path="/" exact component={Productos}/>
          <Route path="/Carrito" exact component={Carrito}/>
          <Route path="/" component={Err}/>
        </Switch>
      </Router>
      {true ? <Sesion/> : null}
    </div>
  )
}