Function is declared but its value is never used

I am trying to create a dropdown menu carrying some checkboxes. I found this reference and think is very valuable. I was implementing it in my example code but I get the function is declared but its value is never used error and don't understand why.

Below the snippet of code I am using:

import React from 'react';
import styled from 'styled-components';
import { Table } from 'reactstrap';
import GoogleMapReact from 'google-map-react';
import { Card, CardImg, CardText, CardBody, CardTitle, /*CardSubtitle,*/ Button } from 'reactstrap';

const MapContainer = styled.div`
some data....
`;

var expanded = false;
function showCheckboxes() {
    var checkboxes = document.getElementById('checkboxes');
    if (!expanded) {
        checkboxes.style.display = 'block';
        expanded = true;
    } else {
        checkboxes.style.display = 'none';
        expanded = false;
    }
}

const BoatMap = () => (
    <div className="google-map">
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'MY_KEY' }}
            center={{
                lat: 42.4,
                lng: -71.1
            }}
            zoom={11}
        >
            {/* Insert components here */}
            <form>
                <div class="multiselect">
                    <div class="selectBox" onClick="showCheckboxes()">
                        <select>
                            <option>Select an option</option>
                        </select>
                        <div class="overSelect" />
                    </div>
                    <div id="checkboxes">
                        <label for="one">
                            <input type="checkbox" id="one" />First checkbox
                        </label>
                        <label for="two">
                            <input type="checkbox" id="two" />Second checkbox
                        </label>
                        <label for="three">
                            <input type="checkbox" id="three" />Third checkbox
                        </label>
                    </div>
                </div>
            </form>
        </GoogleMapReact>
    </div>
);

export default function GoogleMap() {
    return (
        <MapContainer>
        </MapContainer>
    );
}

What I have done so far:

Apart from doing a good amount of research, I was looking through this document to make sure everything is correctly set. I think it is.

I also found this useful post which carries a lot of information and dug a little bit in it, but I am not sure is completely connected with my error.

I used <form>, even though I am still learning this type of components and thought it could be a good exercise. I am not sure if the error could be due to that at this point.

Thanks for pointing in the right direction for solving it.

Since showCheckboxes is declared outside of BoatMap function declaration, the solution is to use onClick={showCheckboxes}. Note that even if showCheckboxes was declared inside BoatMap, you would not use the this keyword, since BoatMap is not a class.