Render Header or Title to ant design - Timepicker component - reactjs

Question

I would like to render some header/title for time picker to indicate this is HH, MM and SS (Which is Hour, Minute, Sec) but unable to do.
I can achieve it by only renderExtraFooter which renders at the bottom of the picker but I need it on the top of the time picker. You can check the code below:
https://stackblitz.com/edit/react-j1kksn-ef4m56?file=index.js
Some of the users feels hard to find which is hour, minute and seconds. It would be better to have that option.
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { TimePicker } from "antd";
const onChangeTime = time => {
console.log(time);
};
ReactDOM.render(
<TimePicker
onChange={onChangeTime}
renderExtraFooter={() => (
<div className="timePickerHeader">
<p>HH</p>
<p>MM</p>
<p>SS</p>
</div>
)}
/>,
document.getElementById("container")
);
.timePickerHeader {
position: float;
}
.timePickerHeader p {
display: inline-block;
width: 33%;
}

Answer 1

Looks like there is no header option, but you can change the style to make the footers align with their respective column. Use a grid column layout.
Avoid using <p> and position:float and display:inline-block in favor of <div> with display:grid and display:flex.
renderExtraFooter={() => (
<div className="timePickerHeader">
<div>HH</div>
<div>MM</div>
<div>SS</div>
</div>
)}
.ant-picker-footer-extra {
padding-left: 7px;
}
.timePickerHeader {
display: grid;
grid-auto-flow: column;
}
.timePickerHeader div {
padding-left: 14px;
text-align: left;
}
Note: The CSS above can be simplified to the following, if you just want to center the text within each column.
.ant-picker-footer-extra {
padding: 0;
}
.timePickerHeader {
display: grid;
grid-auto-flow: column;
}
.timePickerHeader div {
text-align: center;
}