Not understanding signals

const [opened, setOpened] = createSignal(false);

  createEffect(() => {
    console.log('parent opened: ', opened());
  });

  return (<>
    <div style={{ 'padding': '40px' }}>
      <Burger opened={opened()} onClick={() => setOpened((o) => !o)} size={400} lineSize={1} />
    </div>
  </>)

export const Burger = factory<BurgerFactory>((_props, ref) => {
const props = useProps('Burger', defaultProps, _props);
  const [local, others] = splitProps(props, [
    ...
    'opened',
    ...
  ]);

If I put a createEffect here.  I don't see anything at all.

createEffect(() => {
  console.log('opened', local.opened()); <-- have tried many combinations here
});

return (
    ...
      <Box mod={['reduce-motion', { opened: () => local.opened! }]} {...getStyles('burger')} />
      {local.children}
    ...
  );
});

opened: local.opened
opened: local.opened()
opened: () => local.opened
opened: () => local.opened!