React Native: Array.map()-based rendered components not updating on state change

I have a few components being rendered from an Array.map() that won't update even when the state (pertaining to said array) changes, and I have no clue why this is.

Home (main component) :

import React, { useState } from 'react';import { View, TouchableOpacity } from 'react-native';import { base } from './data';import Indicator from './components/Indicator';const Home = () => {  const [switches, setSwitches] = useState(base);  const handleToggle = (id: number) => {    base.map(switch => {      switch.on =        (switch.on && switch.id !== id) || (!switch.on && switch.id === id)          ? !switch.on          : switch.on;    });    setSwitches(base);  };  return (<View>      {switches.map(switch => (<TouchableOpacity          onPress={() => handleToggle(switch.id)}          key={switch.id}><Indicator            color={switch.color}            on={switch.on}          /></TouchableOpacity>      ))}</View>

Indicator component:

import React from 'react';import { View } from 'react-native';import { On, Off } from './Indicators';interface IndicatorProps {  color: string;  on: boolean;}const Indicator: React.FC<IndicatorProps> = ({ color, on }) => {  return (<View>      {on ? <On /> : <Off />}</View>  );};export default Indicator;

I have verified that the state of switches is changing as expected when clicking the touchable areas, but no visible change occurs in the components.