How to use `useInterval` custom hook and prop values? - reactjs

Question

Code sandbox link: https://codesandbox.io/s/useinterval-customhook-iucj8q?file=/src/components/Displaytimer.js
I have created a custom hook for clock countdown while I am passing minutes input field values and seconds input fields as a prop to the child component it is taking the values too but when I click the start button it is still showing the 0. I think this is taking initial values I have used promises too and console logging each and every value but no use.
Image for output:
APP.js
import "./styles.css";
import Timer from "./components/Timer";
export default function App() {
return (
<div className="App">
<Timer />
</div>
);
}
Timer.js
import { useState, useRef } from "react";
import DisplayTimer from "./Displaytimer";
export default function Timer() {
const [min, setMins] = useState(0);
const [sec, setSecs] = useState(0);
const refValueMinutes = useRef();
const refValueSeconds = useRef();
const onchangeMinutes = (e) => {
// refValueMinutes.current = Number(e.target.value);
// const currVal = refValueMinutes.current;
setMins(Number(e.target.value));
};
const onchangeSeconds = (e) => {
// refValueSeconds.current = Number(e.target.value);
// const currVal = refValueSeconds.current;
setSecs(Number(e.target.value));
};
return (
<div>
<h2>Minutes: </h2> <br />
<input onChange={onchangeMinutes} />
<h2>Seconds: </h2> <br />
<input onChange={onchangeSeconds} />
<br />
<br />
<DisplayTimer min={min} sec={sec} />
</div>
);
}
enter image description here
UseInterval.js(custom hook)
import { useRef, useEffect } from "react";
export default function UseInterval(callback, delay) {
const savedCallback = useRef();
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => {
clearInterval(id);
};
}
}, [delay]);
}
I thought this is due to DOM painting to the web page before the values get initiated to the state so I have tried using promises but no result and suggest me a good way to render this design to the webpage.
I have used use effect too:
useEffect(() => {
startTime();
stopTime();
resetTime();
}, []);