Unsure where to put a map - reactjs

Question

I am currently working on a component to update routines. I am recieving the error message that activity is undefined, and I think I know that the problem is that I was trying to use it before defining it, but everywhere I try to put the .map() causes the code to break. Here's what the file looks like:
import React, { useState, useEffect, Fragment } from "react";
import { getAllActivities } from "../api";
import { attachActivityToRoutine } from "../api";
const UpdateRoutine = ({ routineData, setIsShown }) => {
const handleChange = (event) => {
setValue(event.target.value);
};
const [allActivities, setAllActivities] = useState([]);
console.log(allActivities, 'line 10')
return (
<div>
<form onSubmit>
<label htmlFor="updateRoutine">Update Name:</label>
<input />
<button type="submit">Submit</button>
</form>
<form onSubmit>
<label htmlFor="updateGoal">Update Goal:</label>
<input></input>
<button type="submit">Submit</button>
</form>
<form onSubmit="handleSubmit">
<fieldset>
<label htmlFor="selectActivity">
Activity <span className="selectActivity">({allActivities})</span>
</label>
(v This select is the problem area v)
<select
name="activity"
id="selectActivity"
value={activity}
onChange={(event) => setAllActivities(event.target.value)}
>
{getAllActivities.map((activity, idx) => (
<option key={`${idx}:${activity.name}`} value={activity.name}>
{activity.name}
</option>
))}
</select>
</fieldset>
<button type="submit">Search</button>
</form>
<button
onClick={(event) => {
setIsShown(false);
}}
>
Nevermind
</button>
</div>
);
};
export default UpdateRoutine;
Any advice would be greatly appreciated!