Distinguish between Component props and Story additional props in controls

[lucapollani]

I'm trying to migrate from knobs to controls.
Using knobs I used to assign to props which were not really of the component a name that could help to understand that. For example using a descriptive name like:
const useTotal = boolean('Use total', false);

It worked in a manner that if useTotal was true then I would have passed the component the prop total otherwise not in this way:
<Bar total={useTotal ? number('total', 100) : undefined} />

Using controls I've replicated that behavior like this:

export const Default = {
	render: ({ useTotal, ...args }) => {
		return <Bar {...args} />;
	},
	args: {
		useTotal: false,
		total: 2000,
	},
	argTypes: {
		total: {
			if: { arg: 'useTotal' }
		}
	}
};

BUT in this way useTotal seems to be a prop of the component looking only to Storybook seems it is placed with other props.

I was wondering if with controls there could be something similar or some other way to distinguish between Component props and Story additional props.