onFocus={setTipPercent(null)} 

This triggers a state update during rendering, which forces React to re-render, which then calls setTipPercent(null) again, creating an infinite loop.

Try changing it to use an arrow function to delay execution until focus:

onFocus={() => setTipPercent(null)}