"reset controls" button doesn't refresh the color input with the default value

Describe the bug In the Docs page of a specific story, when I update the color of my component and then click on the Reset Controls button, it doesn't reset the value on the input color.

It happens only when the component has a default value for the corresponding color prop and also has a default value on the story configuration in the component.stories.ts file.

System

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
  Binaries:
    Node: 14.17.4 - C:\Software\NodeJS\node.EXE
    Yarn: 1.22.17 - C:\Software\Yarn\bin\yarn.CMD
    npm: 6.14.14 - C:\Software\NodeJS\npm.CMD
  Browsers:
    Chrome: 99.0.4844.51
    Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.62)
  npmPackages:
    @storybook/addon-a11y: ^6.4.19 => 6.4.19
    @storybook/addon-actions: ^6.4.19 => 6.4.19
    @storybook/addon-essentials: ^6.4.19 => 6.4.19
    @storybook/addon-links: ^6.4.19 => 6.4.19
    @storybook/preset-scss: ^1.0.3 => 1.0.3
    @storybook/vue3: ^6.4.19 => 6.4.19

Additional context Animation The Vue component

<template>
   <div class="spinner-container" :class="classes"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
   props: {
      state: {
         type: String,
         required: false,
         default: "running",
         validator(value: string) {
            return ["running", "paused"].includes(value);
         },
      },
      size: {
         type: String,
         required: false,
         default: "22px",
      },
      color: {
         type: String,
         required: false,
         default: "#000000",
      },
      borderWidth: {
         type: String,
         required: false,
         default: "3px",
      },
   },
   computed: {
      classes() {
         return {
            "spinner-container": true,
            running: this.state === "running",
            paused: this.state === "paused",
         };
      },
   },
});
</script>

<style lang="scss" scoped>
.spinner-container {
   display: inline-block;
   vertical-align: middle;
   border-right-color: transparent !important;
   border-radius: 50%;
   animation: spinner-border 0.75s linear infinite;
   width: v-bind("size");
   height: v-bind("size");
   border: v-bind("borderWidth") solid v-bind("color");

   &.running {
      animation-play-state: running;
   }
   &.paused {
      animation-play-state: paused;
   }
}

@keyframes spinner-border {
   to {
      transform: rotate(360deg);
   }
}
</style>

The story

import Spinner from "@/components/Spinner.vue";

export default {
   title: "Basic/Spinner",
   component: Spinner,
   argTypes: {
      state: {
         control: "select",
         defaultValue: "running",
         options: ["running", "paused"],
      },
      color: {
         control: "color",
         defaultValue: "#000000",
      },
   },
};

const Template = (args: object) => ({
   components: { Spinner },
   setup() {
      return { args };
   },
   template: '<Spinner v-bind="args" />',
});

export const Small = Template.bind({});
Small.args = {
   size: "10px",
   borderWidth: "2px",
};
export const Medium = Template.bind({});
export const Large = Template.bind({});
Large.args = {
   size: "40px",
   borderWidth: "4px",
};

storybookjs / storybook

"reset controls" button doesn't refresh the color input with the default value #17616