I am using ReactJS and react-bootstrap to build a website. I am having an input form of type `time`. As of now on clicking the clock signal, the user is able to select an hour and a minute from 0 to 59. The present form is shown in the image below.

[![enter image description here](https://i.stack.imgur.com/AKdKd.png)](https://i.stack.imgur.com/AKdKd.png)

How can I modify the form such that the user can only select a minute in intervals of 15, i.e. the user should only be shown four possible minute values which are: 0, 15, 30, 45 and is only able to select a value among them. Is this possible?

I tried using the `step` property, but it didn't stopped the user's ability to choose invalid minute values.

The code I have used is shown below. It has been obtained by modifying only the `App.js` of a `create-react-app`.

```js
import React, { useState } from "react";
import { Form } from "react-bootstrap";

function App() {
  const [time, setTime] = useState("");
  return (
    <div className="App">
      <Form.Group>
        <Form.Label>Choose A Time: </Form.Label>
        <Form.Control
          type="time"
          value={time}
          required
          step="900"
          onChange={(e) => {
            setTime(e.target.value);
          }}
        />
      </Form.Group>
    </div>
  );
}

export default App;

```