React JS page went blank after I used a setState() in my functional component

The code was alright before I tried to used the setState function which is setcategory and setvalue in this code but after I did this my react page went blank. What went wrong and how should I fix it?

import Employee_card from './Employee_card'
import '../styles/home.css'
import {
  Link,
  useSearchParams
} from 'react-router-dom'

const Employee_dir:React.FC <props> = (employes) => {

  const [category, setcategory] = useState("")
  const [value, setvalue] = useState("")

 let [searchParams]=useSearchParams();
  
  if(searchParams){
    setcategory(searchParams.get('category')!)
    setvalue(searchParams.get('value')!)
  }

return (
    <div>
         Some code here which is alright
    <div/>
  )
}```

export default Employee_dir

>Solution :

wrap it around a useEffect

useEffect(() => {
  if(searchParams){
    setcategory(searchParams.get('category')!)
    setvalue(searchParams.get('value')!)
  }

}, [searchParams])