Can not set Range min or max dynamically

1

I want change Range min or max property dynamically, but it does not work.

export default ()=>{
	const [min, setMin]=useState(0);
	const [max, setMax]=useState(5);
	
	return(<Page>
  <Navbar title="My Page" backLink />
	  <Button onClick={()=>{setMax(10); setMin(5);}}>Change</Button>
	  <Range min={min} max={max}/>
	  </Page>);
}