Sytax Error in react. please check

Question

import React from "react";
import {useEffect, useState} from 'react';
import {Box, TextField, Button, makeStyles} from '@material-ui/core';
import {getData} from '../service/api.js';
import Information from './Information.jsx'
const useStyles= makeStyles({
component:{
padding:20,
backgroundColor:'rgba(255, 120, 205,0.2)'
},

input:{
color:'blue',
marginRight:15,
marginLeft:15,

},
button:{
width:100,
height:40,
marginLeft:10,
marginTop:5,
backgroundColor:'rgba(173, 14, 88,0.3)'
}

})
const Form= ()=> {
const classes=useStyles();
const [data,getWeatherData]=useState({});

useEffect(()=>{
getData().then(response =>{
getWeatherData(response.Data);
console.log(response.data)
})
},[]);
return (
<>
<Box className={classes.component}>
<TextField id="standard-basic" label="Enter Your City"
inputProps={{className:classes.input}}
className={classes.input}
/>
<TextField id="standard-basic" label="Enter Your Country" inputProps={{className:classes.input}} />
<Button variant="outlined" className={classes.button}>Search</Button>
</Box>
<Information/>
</>
)
}
export default Form;

Answer 1

Describe well your problem and Share a codebit instead type as description