javascript - Too much renderer - react - Stack Overflow

I believe that it is true that the variables belong together and should also be given together. An example. I have a filter with many settings. I would therefore create a filter variable and put all the settings in there:

const [filter, setfilter] = useState<{filter: boolean, type: KurstypeENUM, state: string | null }>({
    filter: false,
    type: KurstypeENUM.NOTHINGCHOSEN,
    state: null
});

So far it works well as long as I don't put a string in it which will be used in heavy writing. For example, if I want to enter a search text, I would declare this field (searchtext) also in the filter:

const [filter, setfilter] = useState<{filter: boolean, type: KurstypeENUM, state: string | null, searchstring: string }>({
    filter: false,
    type: KurstypeENUM.NOTHINGCHOSEN,
    state: null,
    searchtext: ''
});

I get the error message: “Too many renderers”.

If I declare the string variable separately, everything works wonderfully:

const [filtersearch, setfiltersearch] = useState<string>("");
const [filter, setfilter] = useState<{filter: boolean, type: KurstypeENUM, state: string | null }>({
    filter: false,
    type: KurstypeENUM.NOTHINGCHOSEN,
    state: null
});

My code how I change the filter:

OnChangeSearchstring(event) =>
  setfilter( prevState => ( {
    ...prevState,
    searchtext: event.target.value
} ) );

What do I have to change to get it right?

//EDIT More Code: This is a mui (material-ui) component. This is working:

 <TextField
        id="search"
        fullWidth={true}
        label="Search"
        autoComplete="off"
        type="search"
        value={filtersearch}
        onChange={( event ) => {
            setfiltersearch(event.currentTarget.value);
        }}
        margin="normal"
    />

This is not working:

 <TextField
        id="search"
        fullWidth={true}
        label="Search"
        autoComplete="off"
        type="search"
        value={filter.searchtext}
        onChange={( event ) => {
          setfilter( prevState => ( {
                ...prevState,
                searchtext: event.currentTarget.value
            } ) );
        }}
        margin="normal"
    />