I have two React components. The data comes here from an endpoint. I want to add Camera and BLEDevice items to this data and show it to the user. The user can change these two items via radio buttons. However, when the refresh button is clicked, I want this data not to be refreshed, but to remain what the user has selected. I prepared 2 components as below, but I cannot change the radio buttons. Even the logs in the onChange function do not work when I make a selection. What could be the problem here?

UserCard.js:

import React from "react";
import {
  Card,
  CardBody,
  CardTitle,
  Col,
  Container,
  Row,
  FormGroup,
  Label,
  Input
} from "reactstrap";

const UserCard = ({ devices, onSettingChange }) => {

  return (
    <Container>
      <Row>
        {devices?.map((device) => (
          <Col key={device.connectionId} sm="6" md="4" lg="3">
            <Card
              className="mb-4 border rounded"
              style={{ borderColor: "#6c757d", borderWidth: "2px", padding: "10px" }}
            >
              <CardBody>
                <CardTitle tag="h5">{device.deviceName}</CardTitle>
                <FormGroup tag="fieldset">
                  <legend>Camera</legend>
                  <FormGroup check>
                    <Label check>
                      <Input
                        type="radio"
                        name={`camera-${device.connectionId}`}
                        value="Back"
                        checked={device.camera === "Back"}
                        onChange={() => {
                          console.log(`Camera Back selected for ${device.connectionId}`);
                          onSettingChange(device.connectionId, "camera", "Back");
                        }}
                      />
                      Back
                    </Label>
                  </FormGroup>
                  <FormGroup check>
                    <Label check>
                      <Input
                        type="radio"
                        name={`camera-${device.connectionId}`}
                        value="Front"
                        checked={device.camera === "Front"}
                        onChange={() => {
                          console.log(`Camera Front selected for ${device.connectionId}`);
                          onSettingChange(device.connectionId, "camera", "Front");
                        }}
                      />
                      Front
                    </Label>
                  </FormGroup>
                </FormGroup>
                <FormGroup tag="fieldset">
                  <legend>BLEDevice</legend>
                  <FormGroup check>
                    <Label check>
                      <Input
                        type="radio"
                        name={`bleDevice-${device.connectionId}`}
                        value="On"
                        checked={device.bleDevice === "On"}
                        onChange={() => {
                          console.log(`BLEDevice On selected for ${device.connectionId}`);
                          onSettingChange(device.connectionId, "bleDevice", "On");
                        }}
                      />
                      On
                    </Label>
                  </FormGroup>
                  <FormGroup check>
                    <Label check>
                      <Input
                        type="radio"
                        name={`bleDevice-${device.connectionId}`}
                        value="Off"
                        checked={device.bleDevice === "Off"}
                        onChange={() => {
                          console.log(`BLEDevice Off selected for ${device.connectionId}`);
                          onSettingChange(device.connectionId, "bleDevice", "Off");
                        }}
                      />
                      Off
                    </Label>
                  </FormGroup>
                </FormGroup>
              </CardBody>
            </Card>
          </Col>
        ))}
      </Row>
    </Container>
  );
};

export default UserCard;

Dashboard.js:

import React, { useEffect, useState, useRef } from "react";
import PropTypes from "prop-types";
import { Button, Card, CardBody, Col, Container, Row } from "reactstrap";
import withRouter from "components/Common/withRouter";
import ClipLoader from "react-spinners/ClipLoader";
import UserCard from "./UserCard";
import Profiles from "./Profiles";
import axios from "axios";

let BASE_URL = process.env.REACT_APP_BASE_URL;
let AUTH_BASE_URL = process.env.REACT_APP_AUTH_BASE_URL;
const Dashboard = () => {

const [dashboardLoading, setDashboardLoading] = useState(false);
const [loading, setLoading] = useState(false);
const [dashboardData, setDashboardData] = useState([]);
  async function getDashboard() {
    try {
      setDashboardLoading(true);
      console.log("Fetching dashboard data...");
      const res = await axios.get(BASE_URL + "web/dashboard");
      console.log("Dashboard data fetched:", res.data.devices);

      const updatedDevices = res.data.devices.map(device => ({
        ...device,
        camera: "Back",
        bleDevice: "Off"
      }));
      console.log("Updated Devices with default values:", updatedDevices);
      setDashboardData(updatedDevices);
      setDashboardLoading(false);
    } catch (err) {
      console.error("Error fetching dashboard:", err);
      setDashboardLoading(false);
    }
  }

  const handleSettingChange = (deviceId, setting, value) => {
    console.log(`handleSettingChange called for ${deviceId} with ${setting}: ${value}`);
    const updatedData = dashboardData.map(device =>
      device.connectionId === deviceId ? { ...device, [setting]: value } : device
    );
    console.log(`Updated setting for device ${deviceId}:`, updatedData);
    setDashboardData(updatedData);
  };

  useEffect(() => {
    getDashboard();
  }, []);


return (
                  <Row className="align-items-center mb-4">
                    <Col xs="auto">
                      <strong>Connected Devices: {dashboardData.length}</strong>
                    </Col>
                    <Col xs="auto">
                      <Button color="success" onClick={getDashboard}>
                        Refresh
                      </Button>
                    </Col>
                    <Col className="ml-auto" xs="auto">
                      <Button color="primary">New Measurement</Button>
                    </Col>
                  </Row>

                  {dashboardLoading ? (
                    <ClipLoader />
                  ) : (
                    <Row>
                      <br />
                      <Col>
                        <UserCard
                          devices={dashboardData}
                          onSettingChange={handleSettingChange}
                        />
                      </Col>
                    </Row>
                  )}
  );