The generation location is incorrect

[beilo]

I found that the generation position is incorrect during use. For details, please refer to the comments in the code below. Thank you for taking the time to solve this problem. Thank you~

          console.debug("lp ~ file: index.tsx:1 ~ SearchInput ~ _:", _)  // This is wrong.
import { Close, Search as SearchIcon } from '@react-vant/icons'
import clx from 'classnames/bind'
import { useState } from 'react'
import { Search } from 'react-vant'
import css from './index.module.scss'
const cxBind = clx.bind(css)

const SearchInput = (props: any) => {
  // value state
  const [value, setValue] = useState('')
  console.debug('lp ~ file: index.tsx:19 ~ SearchInput ~ value:', value)

  const _search = () => {
    props.onSearch(value)
  }
  return (
    <div className={cxBind('box')}>
      <Search
        background="#f2f3f5"
        className={cxBind('search')}
        value={value}
        onChange={(_)=>{
          _ // Here, if using control+option+L, it will be generated at the top of the file.
        }}
        clearable
        onClear={() => {
          setValue('')
        }}
        onSearch={_search}
        leftIcon={null}
        clearIcon={<Close />}
        rightIcon={<SearchIcon onClick={_search} />}
      />
    </div>
  )
}

export default SearchInput