Is it possible to avoid prop drilling in this scenario?

Hello, is it possible to reset the input text from top level component Main other way than just prop drilling input text state from Main component?
const Main = () => {
return (
<>
<button onClick={() => {}}>Reset Input</button>
<SearchInput onValueChange={(v) => {}} />
</>
);
};

export const SearchInput = ({ onValueChange }) => {
const [text, setText] = useState('');
const [value] = useDebounce(text, 300);

useEffect(() => onValueChange(value), [value]);

return (
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
);
};
const Main = () => {
return (
<>
<button onClick={() => {}}>Reset Input</button>
<SearchInput onValueChange={(v) => {}} />
</>
);
};

export const SearchInput = ({ onValueChange }) => {
const [text, setText] = useState('');
const [value] = useDebounce(text, 300);

useEffect(() => onValueChange(value), [value]);

return (
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
);
};
UU
Unknown User580d ago