I've initialized a state based on a database call in a parent component, and when I update it my component does not re-render. The only real reason I chose to implement state here is to allow for an automatic re render after a user decides to change their position by pressing the button. Here is my code

import React, { useEffect, useState } from "react"
import { Button, ButtonGroup, ToggleButton } from "react-bootstrap"
import { useQuery, useMutation } from "@apollo/react-hooks"
import { QUERY_ME_BASIC } from "../utils/queries"
import { UPDATE_POSITION } from "../utils/mutation"

function JobSwitchButton() {
    const { data } = useQuery(QUERY_ME_BASIC)
    const [updatePosition] = useMutation(UPDATE_POSITION)
    const [checked, setChecked] = useState(false);
    let user = data?.me || {}
    const initialPosition = user.customer ? ("customer") : ("driver")
    const [position, setPosition] = useState(initialPosition)
    var driver
    var customer

    const handleSubmit = async e => {
        e.preventDefault()
        console.log(e.target.value)
        if (e.target.value === "customer") {
            customer = true
            driver = false
        } else {
            customer = false
            driver = true
        }

        await updatePosition({
            variables: { _id: user._id, driver: driver, customer: customer }
        })

        setPosition(e.target.value)

    }

    return (
        <>
        <Button value={user.customer ? ("driver") : ("customer")} onClick={handleSubmit}>
         {user.customer ? ("change to driver") : ("change to customer")}
        </Button>
        </>
    )
}

export default JobSwitchButton

I appreciate any input!