I am trying to use the map method on a list of items (hours) to dynamically create Menu Items in an MUI Select component. I am having trouble getting the clicked on item in the custom component (SelectHours) which would give me the current time.

Here is my App.js:

import logo from './logo.svg';
import './App.css';
import React from 'react'
import SelectHours from './SelectHours/SelectHours.js'
import { Select, MenuItem, Menu } from '@mui/material'
import { useState } from 'react';

class App extends React.Component {

    handleChange(e) {
        console.log("handleChange: ", e)
    }

    constructor(props) {
        super(props);
        console.log("props", props)
        this.input = React.createRef();
        var hoursArray = ['0000', '0100', '0200', '0300', '0400', '0500', '0600', '0700', '0800', '0900', '1000', '1100', '1200', '1300', '1400', '1500', '1600', '1700', '1800', '1900', '2000', '2100', '2200', '2300'];
        this.state = { value: "[]", start: hoursArray[5], end: "2100", hoursArray: hoursArray, items: [{ sup: "sup1" }, { sup2: "sup2" }, { sup: "sup3" }]}
    }

    render() {
        return (
            <div className="TopContainer">
            <Select
            labelId="select-demo"
            id='select-demo'
            onChange={event => this.handleChange(event.target.value)}
            >
            <SelectHours>
            </SelectHours>
        </Select>
        </div>
    );
  }
}

export default App

The SelectHours component is supposed to dynamically create Menu Items on a list using .map, but I am not getting the selected index with onClick:

import React, { useState } from 'react';
import { Select, MenuItem, Menu } from '@mui/material'

function SelectHours() {
    var hoursArray = ['0000', '0100', '0200', '0300', '0400', '0500', '0600', '0700', '0800', '0900', '1000', '1100', '1200', '1300', '1400', '1500', '1600', '1700', '1800', '1900', '2000', '2100', '2200', '2300']

function setHour(hour) {
    console.log("foo")
}

return hoursArray.map(hour => {
    return (
        <MenuItem
            value={hour}
            key={hour}
            onClick={setHour(hour)}
        >
            <label>
                {hour}
            </label>
            </MenuItem>
    )
    })
}

export default SelectHours

Can anyone tell me how to grab that hour string?