not working infinite loop

frontend/src/pages/map/map.js

@@ -94,32 +94,22 @@ const Marker = ({ show, place }) => {
   );
 };
 
-export class MarkerInfoWindow extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      places: [],
-    };
-  }
-  componentDidMount() {
-        jsonFile.results.forEach((result) => {
-          result.show = false; // eslint-disable-line no-param-reassign
-        });
-        this.setState({ places: jsonFile.results });
-  }
+function MarkerInfoWindow (){
 
+  jsonFile.results.forEach((result) => {
+    result.show = false; // eslint-disable-line no-param-reassign
+  })
+
+     const [places,setPlaces]  = useState([])
+    setPlaces(jsonFile.results)
   // onChildClick callback can take two arguments: key and childProps
-  onChildClickCallback = (key) => {
-    this.setState((state) => {
-      const index = state.places.findIndex((e) => e.id === key);
-      state.places[index].show = !state.places[index].show; // eslint-disable-line no-param-reassign
-      return { places: state.places };
-    });
-  };
+  const updateState = (key) => {
 
-  render() {
-    const { places } = this.state;
+      const index = places.findIndex((e) => e.id === key);
+      places[index].show = !places[index].show; // eslint-disable-line no-param-reassign
+      //setPlaces(places)
+
+  };
 
     return (
       <>
@@ -128,7 +118,7 @@ export class MarkerInfoWindow extends Component {
             defaultZoom={10}
             defaultCenter={[49.41273, 2.81853]}
             bootstrapURLKeys={{ key: MY_API_KEY }}
-            onChildClick={this.onChildClickCallback}
+            onChildClick={updateState}
           >
             {places.map((place) => (
               <Marker
@@ -143,7 +133,7 @@ export class MarkerInfoWindow extends Component {
         {/* )} */}
       </>
     );
-  }
+
 }
 
 InfoWindow.propTypes = {