storybook argstype doesnt change the storybook compononet

Question

in my storybook i got

const meta = {
  title: 'Components/SideBar',
  component: SideBar,
  parameters: {
    layout: 'center',
  },
  //   tags: [],
  //   argTypes: {},
} satisfies Meta<typeof SideBar>;

export default meta;

const Template = (args) => <SideBar {...args} />;
export const ChangeColors = Template.bind({});

ChangeColors.argTypes = {
  color: {
    control: {
      type: 'color',
    },
  },
};


import { Box, Flex, Image, Stack, Text } from '@chakra-ui/react';

export default function SideBar() {
  return (
    <Box w="64" bg="primary.400" color="white" fontSize="sm">

i want to change the color from white to all the colors in my storybook so i could see all the options, how can i do it ?