I recently made changes to the 'Leak Code Filter' component, but after compiling, the changes do not appear on my local server

Question

"I am working on a React project (version 17.0.2) using Create React App as my build tool. I recently made changes to the 'Leak Code Filter' component, but after compiling, the changes do not appear on my local server. I have tried clearing the cache, restarting the development server, and checking for any build errors, but the problem persists. Below is the code for the 'Leak Code Filter' component and any relevant configuration files or build scripts. Can you help me figure out why my changes are not being reflected after compiling?"

import { CheckboxTree, FilterActionButtons } from '@innovation-toolkit/ui';
import _ from 'lodash';
import { useState } from 'react';
import styled from 'styled-components';
import { HeaderContent } from 'shared/components';
import { useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';
import { selectLeakCodes } from 'redux/searchItems/selectors';
import { setLeakCodes, resetLeakCodes } from 'redux/searchItems/actions';

const CheckboxTreeWrapper = styled.div`
    padding-top: 20px;
    padding-left: 5px;
`

export const LeakCodeFilter = ({closeTabs, footNote}) => {

    const dispatch = useDispatch();

    const stateSelectedCodes = useSelector(selectLeakCodes)
    const [selectedCodes, setSelectedCodes] = useState(stateSelectedCodes);

    console.log('stateSelectedCodes:', stateSelectedCodes);

    const options = [
        {
            label: 'BG - Non Hazardous',
            value: 'BG - Non Hazardous',
            children: [
                { label: 'Code 2', value: 'Code 2' },
                { label: 'Code 3 - Plastic', value: 'Code 3 - Plastic' },
                { label: 'Code 3 - Steel', value: 'Code 3 - Steel' },
            ],
        },
        { label: 'BG - Hazardous', value: 'BG - Hazardous' },
        { label: 'AG - Non Hazardous', value: 'AG - Non Hazardous' },
        { label: 'AG - Hazardous', value: 'AG - Hazardous' },
    ];

    const handleChange = (newSelectedCodes) => {
        console.log('handleChange: newSelectedCodes:', newSelectedCodes);
        setSelectedCodes(newSelectedCodes)
    }

    const handleConfirm = () => {
        console.log('handleConfirm: selectedCodes:', selectedCodes);
        dispatch(setLeakCodes(selectedCodes));
        closeTabs();
    }

    const handleClear = () => {
        console.log('handleClear');
        dispatch(resetLeakCodes());
        closeTabs();
    }

    return (
    <div>
            <HeaderContent
                title="Leak Code"
                closeTabs={closeTabs}
            >
            <CheckboxTreeWrapper>
                <CheckboxTree
                    options={options}
                    onChange={handleChange}
                    value={selectedCodes}
                />
            </CheckboxTreeWrapper>
        </HeaderContent>
        <FilterActionButtons
                isConfirmDisabled={_.isEqual(stateSelectedCodes, selectedCodes)}
                onConfirm={handleConfirm}
                footNote={footNote}
                isClearDisabled={stateSelectedCodes.length === 0 && selectedCodes.length === 0}
                onClear={handleClear}
            />
    </div>)
}

export const LeakCodeFilterStatus = ({allLeakCodesCount = 4}) => {
    const selectedLeakCodes = useSelector(selectLeakCodes);
    console.log('LeakCodeFilterStatus: selectedLeakCodes:', selectedLeakCodes);

    if (selectedLeakCodes.length === 0) {
        return "Select Leak Code(s)";
    } 
    else if (selectedLeakCodes.length === 1) {
        return selectedLeakCodes[0] + ' Selected'
    }
    else if (selectedLeakCodes.length === allLeakCodesCount) {
        return "All Leak Codes Selected"
    }
    else {
        return selectedLeakCodes.length + ' Leak Codes Selected';
    }
}

The result looks like this: enter image description here

I am expecting something like this:enter image description here

for more details:

Update selections to match: BG - Non Hazardous Code 2 Code 3 - Plastic Code 3 - Steel BG - Hazardous AG - Non Hazardous AG - Hazardous BG - Non Hazardous will be "on" by default. Also, make sure the dropdown selections are collapsed. Since this filter will have BG - Non Hazardous "on" by default, the "Confirm Selection" button will be "default" instead of "inactive". The "Clear Selection" button will stay "inactive" until the user selects/deselects something.

Filters - *Note: Even though BG - Non Hazardous will be "on" by default, the first state will still be the default state.

Filter Tabs - Default - Collapsed *Note: BG - Non Hazardous is "on" and collapsed Default - Expanded Selected - Collapsed - Multiple Deselected - Expanded - Single