I have a problem with Search Params

import {
  createFileRoute,
  useNavigate,
  useSearch,
} from '@tanstack/react-router';
import { z } from 'zod';

const characterSearchSchema = z.object({
  name: z.optional(z.string()),
});

export const Route = createFileRoute('/search')({
  component: RouteComponent,
  validateSearch: characterSearchSchema,
});

function RouteComponent() {
  const { name } = useSearch({ from: '/search' });
  const navigate = useNavigate({ from: '/search' });

  const onChange = (value: string) => {
    if (value) {
      navigate({ search: (prev) => ({ ...prev, name: value }) });
    } else {
      navigate({ to: '/search' });
    }
  };

  return (
    <div>
      <input defaultValue={name} onChange={(e) => onChange(e.target.value)} />
    </div>
  );
}

import {
  createFileRoute,
  useNavigate,
  useSearch,
} from '@tanstack/react-router';
import { z } from 'zod';

const characterSearchSchema = z.object({
  name: z.optional(z.string()),
});

export const Route = createFileRoute('/search')({
  component: RouteComponent,
  validateSearch: characterSearchSchema,
});

function RouteComponent() {
  const { name } = useSearch({ from: '/search' });
  const navigate = useNavigate({ from: '/search' });

  const onChange = (value: string) => {
    if (value) {
      navigate({ search: (prev) => ({ ...prev, name: value }) });
    } else {
      navigate({ to: '/search' });
    }
  };

  return (
    <div>
      <input defaultValue={name} onChange={(e) => onChange(e.target.value)} />
    </div>
  );
}