Restart react timer from parent component - reactjs

Question

I have a small issue here:
I have two components, a parent, and a timer, which is one of the children of parent
the parent passes down to the child a delay and a callback. The timer will execute the callback every delay milliseconds.
this is the code for the timer:
interface TimerProps {
delayInMilliseconds: number;
callback: Function;
}
const Timer = (props: TimerProps) => {
const { delayInMilliseconds, callback } = props;
const [ timerId, setTimerId ] = React.useState(0);
React.useEffect(() => {
createTimer();
}, []);
const createTimer = () => {
setTimerId(setInterval(callback, delayInMilliseconds))
};
const stopTimer = () => {
clearInterval(timerId);
};
const restartTimer = () => {
stopTimer();
createTimer();
};
return <button onClick={restartTimer}>stop timer</button>;
};
So far, so good. The timer does what id needs to do, and the restartTimer function works.
What I'm trying do do now is to tie the restartTimer function to a button that is present on the parent component.
I've tried to use React.forwardRef with React.useImperativeHandle, but it's not entirely clear to me the mechanism behind it, and so far I haven't had any luck
Could anyone help me understand how to "expose" the child's restartTimer function to the parent element?

Answer 1

I ended up just making the functional component a class component, and using useRef to access it from the parent element
child:
interface TimerProps {
delayInMilliseconds: number;
callback: Function;
}
interface TimerState {
timerId: number;
}
class Timer extends React.Component<TimerProps, TimerState> {
constructor(props: TimerProps) {
super(props);
this.state = {
timerId: 0,
};
}
componentDidMount() {
this.createTimer();
}
createTimer = () => {
this.setState({
...this.state,
timerId: setInterval(this.props.callback, this.props.delayInMilliseconds),
});
};
stopTimer = () => {
clearInterval(this.state.timerId);
};
restartTimer = () => {
this.stopTimer();
this.createTimer();
};
render() {
return null;
}
}
export default Timer;
parent:
const handleRefreshButtonClick = () => {
if (timerRef) {
timerRef?.current?.restartTimer();
}
}
...
const timerRef = React.useRef();
return(
<Timer
ref={timerRef}
delayInMilliseconds={refreshDelay //5000}
callback={doOtherStuff}/>
)
...
<Button onClick={handleRefreshButtonClick} />

Answer 2

create the state and function in your parent component and pass that to your child component i.e timer component and handle it from your parent component.