TS2345 how to get around the error?

Question

typescript

Hey!
There is this code:

interface PopupInfoObj {
  city?: string,
  image?: string,
  longitude?: number | null,
  latitude?: number | null,
  population?: string,
  state?: string
}
interface State {
  width: number,
  height: number,
  latitude: number,
  longitude: number,
  zoom: number,
  popupInfo?: PopupInfoObj | null | void ;
}

const App: React.FC<Props> = props => {
  const initialState: State = {
    width: 400,
    height: 400,
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8,
    popupInfo: {
      longitude: null,
      latitude: null
    },
  }
  const [viewport, setViewport] = useState(initialState)

  const _renderCityMarker = (city: PopupInfoObj, index: number) => {
    return (
      <Marker
        key={`marker-${index}`}
        longitude={city.longitude}
        latitude={city.latitude}
      >
        <CityPin 
           size={20} 
           onClick={() => setViewport({ popupInfo: city })}     <------- ts(2345) текст ошибки ниже
         />
      </Marker>
    )
  }

return (...)

Thus, when I try to add new city data for the popupInfo TS object , it gives an error

What should I do?

Answer 1

I managed to curse everyone in the world. But the mistake was the fault of my crooked hands
setViewport({...viewport, popupInfo: cityObj})

Answer 2

Try

const [viewport, setViewport] = useState<State>(initialState)