React Warning: Maximum update depth exceeded

I am new to React.js and I have an app that communicates with a server written in Python. I use useEffect to continuously update the information coming from the server But I'm getting the 'Maximum update depth exceeded' error. This is my code:

const address = "http://localhost:4010"
const socket = io(address);
function App() {
const [MenuState, setMenuState] = useState("/")
const [UIinputs, setUIinputs] = useState({
progressState: "stop"
});
const [UIoutputs, setUIoutputs] = useState({
deliveredEnergy: 0,
estTime: "00:00:00",
estCost: 0,
soc: 75,
chargerState: 4,
currentPower: 0,
progressState: 2,
current: 0,
voltage: 5,
carID: "a",
debug: [{}, {}]
});
useEffect(() => {
socket.emit('UIinputs', UIinputs)
// eslint-disable-next-line
}, [UIinputs])
useEffect(() => {
socket.on('UIoutputs', (data) => {
setUIoutputs(UIoutputs => ({
...UIoutputs,
deliveredEnergy: data.deliveredEnergy,
estTime: data.estTime,
soc: data.soc,
chargerState: data.chargerState,
currentPower: data.currentPower,
progressState: data.progressState,
current: data.current,
carID: data.carID,
voltage: data.voltage,
debug: data.debug,
}));
});
// eslint-disable-next-line
}, [UIoutputs])
return (
<React.Fragment>
<CssBaseline />
<div className='app-container'>
<div className='top-bar'>
<Header />
<BackButton
MenuState={MenuState}
setMenuState={setMenuState} />
<ScanQR />
</div>
<Routes>
<Route path='/' element={
<Menu
UIoutputs={UIoutputs}
setMenuState={setMenuState} />}>
</Route>
<Route path='/profile' element={
<Profile
UIoutputs={UIoutputs} />}>
</Route>
<Route path="/station" element={
<Charger
UIinputs={UIinputs}
setUIinputs={setUIinputs}
UIoutputs={UIoutputs}
setUIoutputs={setUIoutputs} />}>
</Route>
<Route path="/dev" element={
<Dev
UIoutputs={UIoutputs} />}>
</Route>
</Routes>
<BottomBar />
</div>
</React.Fragment>
);
};

When you update the UIoutputs state inside the useEffect, it triggers a re-render, which in turn causes the useEffect to run again, creating an infinite loop of state updates and re-renders. To fix this issue, you need to ensure that you only update the state when necessary and avoid causing unnecessary re-renders.

so remove the dependency like this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

useEffect(() => {
socket.on('UIoutputs', (data) => {
setUIoutputs(UIoutputs => ({
...UIoutputs,
deliveredEnergy: data.deliveredEnergy,
estTime: data.estTime,
soc: data.soc,
chargerState: data.chargerState,
currentPower: data.currentPower,
progressState: data.progressState,
current: data.current,
carID: data.carID,
voltage: data.voltage,
debug: data.debug,
}));
});
// eslint-disable-next-line
}, [])

<!-- end snippet -->