How to store user input using React state with dynamic number of questions

I’m trying to create a form and store the user inputs for each textfield into states. The questions will be retrieved from an external source so I store all of them into an object where the questions and answers are represented as key-value pairs. The problem with this implementation is that I can’t type anything into the textfields. They all remain empty no matter what I type.

import Box from "@mui/system/Box";
import Stack from "@mui/system/Stack";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import TextField from "@mui/material/TextField";
import { useState } from "react";
import HRMButton from "../Button/HRMButton";
import { fonts } from "../../Styles";


export default function OnboardingSurvey({prev, next, style}) {
    //The form could contain any number of questions not just the four used in this example
    const [form, setForm] = useState({
        "What suggestions do you have for improving the company culture or work environment?": "",
        "Do you have any feedback on your manager or team that you'd like to share?": "",
        "How was your experience working here?": "",
        "Is there anything else you would like to share that we haven't discussed?": "" 
    });

    return (
        <Box sx={{...{
            border: "1px solid #EBEBEB",
            borderRadius: "10px",
            minWidth: "1003px",
            paddingX: "113px",
            paddingY: "63px",
            fontFamily: fonts.fontFamily
        }, ...style}}>
            <h4 style={{textAlign: "center", marginTop: 0}}>Please answer the questions below as detailed as possible</h4>
            <p style={{textAlign: "center", marginBottom: "50px"}}>
                Your answers are going to be used to further improve our process.
            </p>
            {Object.keys(form).map((question) => (
                <>
                    <p style={{textAlign: "left"}}>{question}</p>
                    <TextField 
                        id={`${question}-textfield`}
                        value={form[question]}
                        placeholder={"Your answer here"}
                        onChange={(e) => {
                            setForm({
                                ...form,
                                question: e.target.value
                            });
                        }}
                        rows={4}
                        multiline
                        sx={{
                            marginBottom: "50px",
                            width: "100%"
                        }}
                    />
                </>
            ))}
            <Stack direction="row" alignContent="center" justifyContent="space-between">
                <HRMButton mode="secondaryB" startIcon={<ArrowBackIcon />} onClick={prev}>Previous</HRMButton>
                <HRMButton mode="primary" onClick={next}>Save and next</HRMButton>
            </Stack>
        </Box>
    );
};