How to set user input to be capitalised - reactjs

Question

I am trying to access the https://docs.openaq.org/ api and I have created a search function, where you can type the name of the city which should set a state which then is added to the url used to the data. However the user input must be capitalised and I can't seem to get it to work.
import React, {useState} from 'react';
import Axios from 'axios';
import Button from '../UI/Button';
import SearchedCity from './SearchedCity';
const Search = () => {
const [searchedCity, setSearchedCity] = useState('');
const [city, setCity] = useState();
const [airQuality, setAirQuality] = useState();
const [dateAndTime, setDateAndTime] = useState();
const [latitude, setLatitude] = useState();
const [longitude, setLongitude] = useState();
const [country, setCountry] = useState();
const searchCity = async () => {
try{
const url = `https://api.openaq.org/v1/measurements?country=GB&city=${searchedCity}`;
const res = await Axios.get(url);
console.log(res)
} catch (error) {
alert('Please learn to spell');
}
}
const handleSubmit = (e) => {
e.preventDefault();
searchCity();
console.log({searchedCity})
}
const handleChange = (e) => {
let userInput = e.target.value;
userInput.charAt(0).toUpperCase()
console.log(userInput)
setSearchedCity(userInput)
}
return (
<div>
<form onSubmit={handleSubmit} className="form" >
<label>
<input type="text" placeholder="Search for a UK city" onChange={handleChange} />
<Button handleSubmit={handleSubmit}></Button>
</label>
</form>
<SearchedCity city={city} ></SearchedCity>
</div>
);
};
export default Search;

Answer 1

Try something like this
userInput = userInput.charAt(0).toUpperCase() + userInput.slice(1);
It will capitalise the first letter but keep the rest of the string same.

Answer 2

I think the issue is that you don't set the value after changing that character.
So, just do that.
const handleChange = (e) => {
let userInput = e.target.value;
userInput = userInput.charAt(0).toUpperCase()
console.log(userInput)
setSearchedCity(userInput)
}