Args argument to storybook template is wrong shape - reactjs

Question

I'm trying to follow https://storybook.js.org/docs/react/writing-stories/introduction and hitting a snag when trying to do the Template example. My code is:
import { ComponentMeta, ComponentStory } from '#storybook/react';
import React, { FC } from 'react';
interface FooProps {
myArg: string;
}
const Foo: FC<FooProps> = ({ myArg }) => <p>{myArg}</p>;
Foo.displayName = 'Foo';
export default {
component: Foo,
title: 'Foo',
} as ComponentMeta<typeof Foo>;
const Template: ComponentStory<typeof Foo> = (args) => {
console.log(args);
return <Foo {...args} />;
};
export const Default = Template.bind({});
Default.args = { myArg: 'Foo' };
However, the args argument that's passed to Template is a complex object that describes the story and has nested under it args.args which is what I'd want to pass to my component. Trying to use that throws a TS error though, but also from looking at the docs and GH issues, it seems like people are successfully using this paradigm, so I'm not sure why it's failing for me.
I'm using the latest storybook version that's been released (6.5.13), and my configuration is:
module.exports = {
stories: [
'./**/*.stories.#(js|jsx|ts|tsx)',
],
addons: [
{
name: '#storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss'),
},
},
},
],
framework: '#storybook/react',
};