React Js Focus Input onclick Button

<!DOCTYPE html>
<html>

</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState, useEffect, useRef } = React;

function App() {
      const inputRef = useRef(null);

const handleButtonClick = () => {
        if (inputRef.current) {
          inputRef.current.focus();
        }
      };

return (
        <div className='container'>
          <h3>React Js Focus input onclick Button</h3>
          <input ref={inputRef} type="text" placeholder="Type something..." />
          <button onClick={handleButtonClick}>Focus Input</button>
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

input[type="text"] {
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 250px;
    }

button {
      padding: 8px 16px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

button:hover {
      background-color: #0056b3;
    }
  </style>
</body>

</html>