Use controlled state

1import * as React from "react";
2 
3// eslint-disable-next-line @typescript-eslint/no-explicit-any
4export function useControlledState(props) {
5	const { value, defaultValue, onChange } = props;
6 
7	const [state, setInternalState] = React.useState(
8		value !== undefined ? value : defaultValue,
9	);
10 
11	React.useEffect(() => {
12		if (value !== undefined) setInternalState(value);
13	}, [value]);
14 
15	const setState = React.useCallback(
16		(next, ...args) => {
17			setInternalState(next);
18			onChange?.(next, ...args);
19		},
20		[onChange],
21	);
22 
23	return [state, setState];
24}