avoiding used more hooks than previous render

const Update = () => {
    const router = useRouter()
    const { id } = router.query
    if (!id) return <>Invalid ID</>
    
    const readOneQuery = procedures.readOne.useQuery({ id: id as string })
    
    if (readOneQuery.isLoading) return <ScreenLoader />
    if (readOneQuery.isError) return <>Something went wrong while fetching data</>


    return <FormBuilder type="update" model={model} procedures={procedures} currentId={id as string} prefill={readOneQuery.data} />

}