How to handle duplicate slugs with different parent pages in a client website.

{
			name: 'slug',
			title: 'Slug',
			type: 'slug',
			options: {
				source: 'name',
				slugify: (input) =>
					input
						.toLowerCase()
						//Remove spaces
						.replace(/\s+/g, '-')
						//Remove special characters
						.replace(/[&\/\\#,+()$~%.''":*?<>{}]/g, ''),
			},
			validation: Rule => Rule.custom((slug, section) => {
				console.log(slug, section.parent.parentPage._ref)
				let parentRef = '*[_type=="pillar" && slug.current == $slug]{parentPage{_ref}}'
				const params = {slug: slug.current}
				return sanityClient.fetch(parentRef, params).then(matchingParents => {
					let count = 0;
					console.log({matchingParents})
					matchingParents.forEach(page => {
						page.parentPage._ref === section.parent.parentPage._ref ? count++ : count
					})

					console.log({count})
					if(count === 1) {
						return true
					} else {
						return false
					} 
				})
			})
		},

		{
			name: 'parentPage',
			title: 'Parent Page',
			type: 'reference',
			to: [{ type: 'pillar' }],
			// This ensures we cannot select other "children"
			options: {
				filter: '!defined(parentPage)',
			},
		},

validation: Rule => Rule.custom(async (slug, section) => {
				const query = '*[_type=="pillar" && slug.current == $slug].parentPage._ref'
				const params = {slug: slug.current}
				const parentRefs = await sanityClient.fetch(query, params)

        return parentRefs.filter(parentRef => parentRef === section.parent.parentPage._ref).length === 1 ? true : 'This slug is already in use'
        
			})

flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering.