Triggering Password Management from a React/MUI webapp

I've got a login & password-reset workflow setup in my MUI web app but I can't seem to get Safari to save the username or reset passwords to the keychain. The new password fields offer "Suggest New Password" but upon submitting, it doesn't offer to save the password so the user gets stuck without a chance to view or copy their new password.

For example, what I have for setting the new password is the two text fields and a Save button which calls SavePassword to verify the two fields contain the same password and then a call to AWS Cognito to set the password.

 <FormControl>
    <Grid container item spacing={1}>
        <Grid item xs={12} md={12} lg={12}>
            <TextField refs="passField1" required id="password" label="New Password" type="password"
                sx={{ margin: 2, width: '95%'}}
                onChange={(event) => { setNewPassword1(event.target.value); }} />
        </Grid>
        <Grid item xs={12} md={12} lg={12}>
            <TextField refs="passField2" required id="password2" label="Verify New Password" type="password"
                sx={{ margin: 2, width: '95%' }}
                onChange={(event) => { setNewPassword2(event.target.value); }} />
        </Grid>
        <Grid item xs={12} md={12} lg={12}>
            <Stack direction="column" alignItems="flex-end">
                <Button variant="outlined" onClick={() => { SavePassword() }}
                    sx={{ margin: 2, width: "30%" }}>Save</Button>
            </Stack>
        </Grid>
    </Grid >
</FormControl>

Is there a way to get Safari to allow users to set the password in their keychains?