React Calling Checkbox Component state in another class

I have a react checkbox with state from true to false. Currently, when at true, it redirects to a new page and then back to another page on false.

I want to change the navlinks when the toggle is enabled to true but not sure how to do this when the checkbox componenent is located in another class and is being called.

I have my navlink container here where I am then calling inside my layout to render

const SettingsSideMenu: React.SFC<any> = () => (
    <div className="settings-side-menu">
        <div className="settings-title">SETTINGS</div>
        <ToggleSwitch label = ""/>
        <NavLink to={"/settings/overview"}>OVERVIEW</NavLink>
        <NavLink to={"/settings/settings"}>ACCOUNT</NavLink>
        ...
    </div >
);

export default SettingsSideMenu;

This is my Toggle CheckBox Component

import * as React from "react";
import { Checkbox } from "semantic-ui-react";
import { NavLink, Redirect } from "react-router-dom";

type Props = {
    label: string;
};

type State = {
    status: boolean;
};
function redirectLayout() {
    <Redirect to={"settings/sun"}> </Redirect>
    console.log("Hello");
}


class ToggleSwitch extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            status: false
        };
    }

    componentDidMount() {
        const status = localStorage.getItem("status");
        this.setState({ status: status === "true" ? true : false });
    }

    componentDidUpdate(nextProps, nextState) {
        localStorage.setItem("status", "" + this.state.status);
    }

    stateUpdate() {
        if (this.state.status == true) {
            window.location.href = '/settings/moon'
        }
        else {
            window.location.href = '/settings/sky'
        }
        
    }

    

    render() {
        return (
            <Checkbox
                onClick={() => this.setState({ status: !this.state.status })}
                onChange={() => this.stateUpdate()}
                label={this.props.label}
                checked={!this.state.status}
                toggle
            />
        );
    }
}

export default ToggleSwitch;

I want to do something like my StateUpdate() function but inside my navlinks page, using the toggleSwitch state and changing the navlink content on true or else false.