我是一个新手，正在使用ReactJS和MUI开发，有一个ReactJS TypeScript与MuiText字段表单。希望能够使用useState方法来改变文本字段的值。

同时为文本字段添加onchnage函数。我可以为普通的文本字段添加onchange函数，但不确定如何为MUI文本字段添加它？

import * as React from 'react';
import { useState } from "react"
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import { createTheme, ThemeProvider } from '@mui/material/styles';

import { useForm, SubmitHandler, Controller } from 'react-hook-form';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';


interface IFormInputs {
    filepath: string;
}

const schema = yup.object().shape({
    filepath: yup.string().min(4).required(),

});

const theme = createTheme();

export default function MuiTextField() {
    const {
        control,
        handleSubmit,
        formState: { errors },
    } = useForm<IFormInputs>({
        resolver: yupResolver(schema),
    });
    const [filepath, setFilepath] = useState("vodeo.mp3");

    const onSubmit: SubmitHandler<IFormInputs> = (data) => {
        console.log('data submitted: ', data);
        console.log('filepath: ', data.filepath);
    };

    return (
        <ThemeProvider theme={theme}>
            <Container component="main" maxWidth="lg">
                <CssBaseline />
                <Box
                    sx={{
                        marginTop: 8,
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                    }}
                >

                    <form onSubmit={handleSubmit(onSubmit)}>
                        <Box sx={{ mt: 3 }}>
                            <Grid container spacing={2}>

                                <Grid item xs={16} sm={6}>
                                    <Controller
                                        name="filepath"
                                        control={control}
                                        defaultValue=""
                                        render={({ field }) => (
                                            <TextField
                                                {...field}
                                                label="File Path"
                                                error={!!errors.filepath}
                                                helperText={errors.filepath ? errors.filepath?.message : ''}
                                                autoComplete="file-path"
                                                fullWidth
                                            />
                                        )}
                                    />
                                </Grid>
                                <Button
                                    type="submit"
                                    variant="contained"
                                    sx={{ mt: 3, mb: 2 }}
                                >
                                    Submit
                                </Button>

                            </Grid>
                        </Box>
                    </form>
                </Box>
            </Container>
        </ThemeProvider>
    );
}

更新： 这是codeshare链接：https://codesandbox.io/s/boring-water-m47uxn?file=/src/App.tsx

当我们将文本框的值更改为auto时，希望将文本框的值更改为audio.mp3，但它不起作用。