Uncaught Error: Maximum update depth exceeded. error in functional component - reactjs

Question

I created a separate sharable MUI react Autocomplete component for having formik state as below
import * as React from 'react';
import Autocomplete from '#mui/material/Autocomplete';
import TextField from '#mui/material/TextField';
import { useDispatch, useSelector } from 'react-redux';
import CircularProgress from '#mui/material/CircularProgress';
import { Formik, useField, Form, FieldArray } from "formik";
export default (props) => {
const [field, meta, helpers] = useField(props);
const ERROR_TEXT = meta.error && meta.touched ? meta.error : '';
// alert(props.inputValue)
return (
<Autocomplete
{...props}
{...field}
helperText={ERROR_TEXT}
error={!!ERROR_TEXT}
fullWidth
size="small"
value={field.value}
onChange={(event, newValue) => {
helpers.setValue(newValue);
}}
onInputChange={(event, newInputValue) => {
props.setInputValue(newInputValue);
}}
renderInput={(params) => (
<TextField
{...params}
placeholder={props.label}
label={props.label}
/>
)}
/>
)
}
Now on one of my pages, I imported the above component two times. like below
<Grid item xs={12} sm={6}>
<MyAsyncSelectField
name="fromAirport"
label="Pickup Airport"
multiple
inputValue={inputValue}
setInputValue={setInputValue}
options={options}
/>
</Grid>
{/*------------ To Airport Start ----------------*/}
<Grid item xs={12} sm={6}>
<MyAsyncSelectField
name="toAirport"
label="Destination Airport"
inputValue={inputValue}
setInputValue={setInputValue}
options={options}
/>
</Grid>
Now here's the case, when I create a state for the input query string like this
const [inputValue, setInputValue] = React.useState("");
React.useEffect(() => {
dispatch(search_airport_list_action(inputValue))
}, [inputValue]);
and pass it as a props in both the custom select components, I get the error as I've mentioned in my title.
But if I create separate states to pass them as props to the respective custom select components, it works like charm. No error at all.
const [inputValue1, setInputValue1] = React.useState("");
const [inputValue2, setInputValue2] = React.useState("");
React.useEffect(() => {
dispatch(search_airport_list_action(inputValue))
}, [inputValue1, inputValue2]);
<Grid item xs={12} sm={6}>
<MyAsyncSelectField
name="fromAirport"
label="Pickup Airport"
multiple
inputValue={inputValue1}
setInputValue={setInputValue1}
options={options}
/>
</Grid>
{/*------------ To Airport Start ----------------*/}
<Grid item xs={12} sm={6}>
<MyAsyncSelectField
name="toAirport"
label="Destination Airport"
inputValue={inputValue2}
setInputValue={setInputValue2}
options={options}
/>
</Grid>
So I'm curious to know why can't I use the same state for the query string? Why am I required to create two separate states for the input query string?
In the console, I'm getting the below error message which is totally absurd to me because I'm using the Functional component and useEffect hook instead of class components and lifecycle methods:
This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.