Help with outputting background image from Sanity in Next.js project

 export const projectQuery = `
*[_type == "project"] | order(slug.current asc) {
  _id,
    website,
    slug,
    image,
    title,
    description,
  "collaborators": *[_type == "article" && references(^._id)]| order(publishedAt desc){
    personReference->{
      image{asset->{url,_id}}
  	}
  }[0...3],
}`;

import { urlFor } from "../lib/sanity";

const Avatar = (props) => {
  return (
    <>
      <StyledAvatar
        css={{
          backgroundImage: `url(${urlFor(props.url).url()})`,
        }}
      />
    </>
  );
};
export default Avatar;

import { sanityClient } from "../../lib/sanity";
import Avatar from "../avatar";

const ProjectCard = (props) => {
  const {
    _id,
    website,
    slug,
    image,
    title,
    description,
    collaborators,
  } = props;

  const collaboratorsImageItemProps = props.collaborators;

  return (
    <>
          {collaboratorsImageItemProps.length ? (
            <>
              <FlexBox>
                <Label>Collaborators</Label>
                <FlexAvatars>
                  {collaborators &&
                    collaborators.map((props) => (
                      <Avatar key={props._id} url={props.url} />
                    ))}
                </FlexAvatars>
              </FlexBox>
            </>
          ) : (
            <Label>No collaborators</Label>
          )}
    </>
  );
};

export default ProjectCard;

import { sanityClient, urlFor } from "../../lib/sanity";
import { projectQuery } from "../../lib/queries";
import ProjectCard from "../../components/cards/project-card";

export default function ProjectsIndex({ projects }) {
  return (

        <>
          {projects && (
            <Grid>
              {projects.map((project) => (
                <ProjectCard
                  key={project._id}
                  website={project.website}
                  image={project.image}
                  title={project.title}
                  slug={project.slug}
                  description={project.description}
                  collaborators={project.collaborators}
                />
              ))}
            </Grid>
          )}
        </>

  );
}

export async function getStaticProps() {
  const projects = await sanityClient.fetch(projectQuery);

  return {
    props: { projects },
  };
}

{collaborators &&
   collaborators.map(collaborator => (
     <Avatar key={props._id} 
        image={collaborator.personReference.image} 
     />
   ))}