React Typescript storybook implement customized Input component with onChange callBack then setState value backTo Input

I am currently implementing a React Customized Input component with storybook. What I am hoping to achieve is this customized Input component will take few args, one of the args is onChangeInput, it'll be responsible to setState value for 'input value' later on, below is my main Input component implementation:

Input.tsx

import React from 'react'

export type Props = {
  /**
   * This is the Label text value
   */
  labelText?: string,
  /**
   * Placeholder text for input
   */
  placeholder?: string,
  /**
   * Classes defined here will be appended to the input's default classes
   */
  className?: string,
  /**
   * Value attribute of Input
   */
  value?: string,
  /**
   * Name attribute of Input
   */
  name?: string,
  /**
   * Label for attribute
   */
  htmlFor?: string,
  /**
   * Callback for when user typing in Input
   */
  onChangeInput: any,
}

/**
 * Generic input component.
 */
export function Input({labelText, placeholder='', className='', value='', name='', htmlFor='', onChangeInput}:Props) {    
    return (
        <div>
            <label className='text-text-01-normal font-medium text-sm leading-5' htmlFor={htmlFor}>
                {labelText}
            </label>
            <div className="relative">
                <input
                    id={htmlFor}
                    className={[
                        "relative w-64 pl-3 h-8 py-2 border rounded bg-ui-03 border-ui-06 text-text-01-normal leading-5 text-sm text-left hover:bg-ui-03 hover:border-ui-07 focus:bg-ui-03 focus:outline-none focus:border-interactive-01-active active:bg-ui-03",                        
                        className
                        ].join(' ')} 
                    placeholder={placeholder}
                    value={value}
                    name={name}
                    onChange={ (e) => { onChangeInput(e.target.value) }}
                />
            </div>
        </div>
    )
}   

Then in my storybook file, I was hoping to have a hook useState for localValue, when onChangeInput as a method passed into customized Input component , the native onChange from input will start to let it setState for localValue , so my customized Input Component could display the input value as user typing...

Input.stories.tsx

import React, { useState } from 'react';
import { Story, Meta } from '@storybook/react';
import { withDesign } from 'storybook-addon-designs'

import { Input, Props } from './Input';

const [localValue, setValue] = useState<string>('');
const onChangeInput = (inputValue: string) => {
    console.log(inputValue);
    setValue(inputValue);
}

export default {
  title: 'General/Input',
  component: Input,
  decorators: [withDesign],
  parameters: {
    design: {
      type: 'figma',
    },
  },
} as Meta;

const Template: Story<Props> = (args:Props) => <Input {...args} />;

export const Default: Story<Props> = Template.bind({});
Default.args = {
  labelText: 'Label',
  placeholder: 'Placeholder',
  name: 'test-name',  
  htmlFor: 'test-for',
  value: localValue,
  onChange: onChangeInput,
} as Partial<Props>;
Default.parameters = {
  design: {
    url: 'https://www.figma.com/to-some-design-url'
  }
}

but unfortunately I cannot get it work, so here to ask for help, please suggest with code example, thanks