Conditional Rendering in react

I need to show and hide elements condtionally in react. I know we can condtionally render by creating boolean value for each element and and by manupulating particular boolean state variable we can conditionally show and hide elements. is there is any ways condtionally show and hide elements by not setting boolean variable for each elemnt in useState?

Here is the code. is there any ways to condtionally show and hide by not creating variable in state

  const [state, setState] = React.useState({
    ele0: true,
    ele1: true,
    ele2: true,
  });
  let arr = [1, 2, 3];

  const handleOnChange = (index) => {
    setState({ ...state, [`ele${index}`]: !state[`ele${index}`] });
  };
  return (
    <div className="App">
      {arr.map((ele, idx) => (
        <div key={idx}>
      {state[`ele${idx}`] &&    <h1>{`element${idx}`}</h1> }
          <button
            onClick={() => handleOnChange(idx)}
          >{`element ${idx} button`}</button>
        </div>
      ))}
    </div>
    )