in storybook I have an object inside an object for the default props of the component

const TemplatePicker = () => {
 const data = {
  data: {
   foo: 'bar' 
 }
}
 return <Picker data={data} />
}
export const Basic = TemplatePicker.bind({});
Basic.args = {
 ...Basic.args,
 data: {
  ...Basic.args.data,
  foo: null
 }
}

but I get an error (storybook doesn't render but there is no error in console or in the terminal) is this valid syntax? and if not is there another way?