componentDidUpdate is called at first render although anything doesn't change - reactjs

Question

What I want to do
When state changes, I would like to fetch data from API and set it to state.
Problem
When I load a page, componentDidUpdate is automatically emitted although anything doesn't change and this is initial render.
I am beginner to React.
I would like to get data from API when I input some data and state changes.
However, when I load a page I got an error that cannot property map of undefined.
Apparently, componentDidUpdate is called for some reasons when the page is first rendered.
In fact, I compared prevState.line to this.state.line, and then I found prevState.line undefined.
I mean, componentDidUpdate is emitted before "" that is an initial value of this.state.line is set to this.state.line.
I just would like to prevent componentDidUpdate from being initially called.
If you know a way to do that, I would like you to tell me that and why it is happening.
Thank you very much.
=========== ============ ============
My code is like this.
class User_Add_PickUp_Form extends Component {
constructor(props) {
super(props);
this.state = {
owner: this.props.loginUser,
lines: '',
stations: '',
textInput: '',
allLines: '',
allStations: '',
};
this.handleChange = this.handleChange.bind(this);
}
spreadAndSetState = (key, value) => {
this.setState({ ...this.state, [key]:value });
};
componentDidMount() {
console.log('Original is ' + this.state.lines)
axios
.get('http://express.heartrails.com/api/json?method=getLines&prefecture=TOKYO')
.then((res) => {
console.log(res.data)
this.setState({ allLines: res.data.response.line })
})
.catch((err) => console.log(err));
}
componentDidUpdate(prevState){
console.log(prevState)
console.log(this.state)
if(prevState.lines != this.state.lines){
axios.get('http://express.heartrails.com/api/json?method=getStations&line=' + this.state.lines)
.then((res)=> {
//
// res.data.response.stations is going to be an array
//
res.data.response.station.map((station) => {
this.spreadAndSetState(this.state.allStations, station.name)
})
})
}
}
handleChange = (e) => {
const name = e.target.name;
const value = e.target.value;
this.spreadAndSetState(name,value)
};
render() {
const { owner, lines, stations, textInput, allLines, allStations } = this.state;
if (allLines === '') {
return <CircularProgress />;
} else {
return (
<div>
<h2>Add Pickup Places</h2>
<select name="lines" onChange={this.handleChange}>
<option value="">Choose a line</option>
{allLines.map((line) => {
return <option value={line}>{line}</option>;
})}
</select>
<select name="lines" onChange={this.handleChange}>
<option value="">Choose a station</option>
{allLines.map((line) => {
return <option value={line}>{line}</option>;
})}
</select>
</div>
);
}
}
}