Trying to set the default value for some of my component properties. Doing a simple string or boolean works just fine, but I can’t find any examples showing something more complex. I’ve tried a few things without success:

export default function ListItem({
  hasPrepend = false,
  prepend = { background: "bg-success", icon: { style:"fas", name: "fa-star" } },
  children,
}) {
  return(
    <div>
      {hasPrepend && <div className={`
        ${prepend.background}
        `}
      >
        <Icon style={prepend.icon.style} name={prepend.icon.name} />
      </div>
    }
    <div>
        {children}
    </div>
</div>
);
}

I’ve also tried

const defaultPrepend = {
  background: "bg-success",
  icon: {
    style: "fas",
    name: "fa-user",
    size: "fa-lg",
  }
};

export default function ListItem({
...
     prepend = defaultPrepend,
...
}) {

Am I even close?