Trying to update state in my react app and then send a put request to the rails backend with checkboxes

I have a checklist. I want to check a box on the checklist and then have the react state update and then send a put request to my rails backend to have the checklist object saved in the backend. I am having several problems

1. I am having trouble getting react to render the checkboxes as checked when the corresponding value is true and unchecked when the corresponding value is false

2. my checkboxes will update the state (or at least create a pending update) when i check the boxes but do nothing when I uncheck them

3. my data always gets sent to my backend as false for all checklist values even if some of them are checked

here is my checklist code

import React, { useState } from 'react' 
import checklist from '../reducers/checklist'

export default function Checklist(props) {
    const [completed_app, setCompleted_app] = useState(props.completed_app ? props.completed_app : false)
    const [edcon_call, setEdcon_call] = useState(props.edcon_call ? true : false)
    const [enrollment, setEnrollment] = useState(props.enrollment ? true : false)
    const [inform_team, setInform_team]  = useState(props.inform_team ? true : false)
    const [parent_call, setParent_call] = useState(props.parent_call ? true : false)
    const [parents, setParents] = useState(props.parents ? true : false)
    const [recieve_testing, setRecieve_testing] = useState(props.recieve_testing ? true : false)
    const [review_testing, setReview_testing] = useState(props.review_testing ? true : false)
    const [staffing, setStaffing] = useState(props.staffing ? true : false)
    const [steps_to_enroll, setSteps_to_enroll] = useState(props.steps_to_enroll ? true : false)
    const [submitted_docs, setSubmitted_docs] = useState(props.submitted_docs ? true : false)
    const [team_assigned, setTeam_assigned] = useState(props.team_assigned? true : false)
    const [telos_hq, setTelos_hq] = useState(props.telos_hq ? true : false)
    const [tour_scheduled, setTour_scheduled] = useState(props.tour_scheduled ? true : false)
    const [vetting, setVetting] = useState(props.vetting? true : false)
    const [w_therapist_call, setW_therapist_call] = useState(props.w_therapist_call ? true : false)
    
    const checklistObj = {
        completed_app,
        edcon_call,
        enrollment,
        inform_team,
        parent_call,
        parents,
        recieve_testing,
        review_testing,
        staffing,
        steps_to_enroll,
        submitted_docs,
        team_assigned,
        telos_hq,
        tour_scheduled,
        vetting,
        w_therapist_call,
    }

    const updateCheck = (item) => {
        switch(item){
            case 'recieve_testing':
                setRecieve_testing(!recieve_testing)
                break;
            case 'review_testing':
                setReview_testing(!review_testing)
                break;
            case 'edcon_call':
                setEdcon_call(!edcon_call)
                break;
            case 'w_therapist_call':
                setW_therapist_call(!w_therapist_call)
                break;
            case 'staffing':
                setStaffing(!staffing)
                break;
            case 'parent_call':
                setParent_call(!parent_call)
                break;
            case 'tour_scheduled':
                setTour_scheduled(!tour_scheduled)
                break;
            case 'steps_to_enroll':
                setSteps_to_enroll(!steps_to_enroll)
                break;
            case 'completed_app':
                setCompleted_app(!completed_app)
                break;
            case 'submitted_docs':
                setSubmitted_docs(!submitted_docs)
                break;
            case 'inform_team':
                setInform_team(!inform_team)
                break;
            case 'team_assigned':
                setTeam_assigned(!team_assigned)
                break;
            case 'telos_hq':
                setTelos_hq(!telos_hq)
                break;
            }
    }

    async function  updateChecklistUi(item, referral_id, id){
            await updateCheck(item)
            if (props.color === "orange" || props.color === "yellow"){
                if (
                    recieve_testing === true && 
                    review_testing === true && 
                    edcon_call === true &&
                    w_therapist_call === true &&
                    staffing === true
                    ) {setVetting(true)} 
            } else if (props.color === "green") {
                   if (
                    recieve_testing === true && 
                    review_testing === true && 
                    edcon_call === true &&
                    w_therapist_call === true
                   ) {setVetting(true)}     
            }
            if (
                parent_call === true && 
                tour_scheduled === true && 
                steps_to_enroll === true &&
                completed_app === true &&
                submitted_docs === true
                ){ setParents(true)}
            if (
                inform_team === true &&
                team_assigned === true &&
                telos_hq === true
            ){setEnrollment(true)}
                await props.setChecklist(checklistObj)
                console.log('beforeAxios:',checklistObj)
                await props.updateChecklist(referral_id, id, checklistObj)
    }

    return (
        <section>
            {console.log('props',props)}
            <h3><strong>Checklist</strong></h3>
            <h5>Vetting</h5>
            <input 
            type='checkbox' 
            name='recieve_testing' 
            checked={!!recieve_testing} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='recieve_testing'>Recieve testing</lable>
            <br/>
            <input 
            type='checkbox' 
            name='review_testing'
            checked={!!review_testing} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='review_testing'>Review testing</lable>
            <br/>
            <input 
            type='checkbox' 
            name='edcon_call'
            checked={!!edcon_call} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='ed_con_call'>Call with Education Consultant</lable>
            <br/>
            <input 
            type='checkbox' 
            name='w_therapist_call'
            checked={!!w_therapist_call} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='w_therapist_call'>Call with Wilderness Therapist</lable>
            <br/>
            {props.color == 'yellow' || props.color == 'orange' ?
                        <>
                        <input 
                        type='checkbox' 
                        name='staffing'
                        checked={!!staffing} 
                        onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
                        />
                        <lable for='staffing'>Staffing with team</lable>
                        <br/>
                        </> : 
                        null
            }
            <h5>Parents</h5>
            <input 
            type='checkbox' 
            name='parent_call'
            checked={!!parent_call} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='parent_call'>Call with Parents</lable>
            <br/>
            <input 
            type='checkbox' 
            name='tour_scheduled'
            checked={!!tour_scheduled} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='tour_scheduled'>Schedule Tour</lable>
            <br/>
            <input 
            type='checkbox' 
            name='steps_to_enroll'
            checked={!!steps_to_enroll} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='steps_to_enroll'>Steps to Enrollment Complete</lable>
            <br/>
            <input 
            type='checkbox' 
            name='completed_app'
            checked={!!completed_app} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='completed_app'>Application Completed</lable>
            <br/>
            <input 
            type='checkbox' 
            name='submitted_docs'
            checked={!!submitted_docs} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='submitted_docs'>Documents Submitted</lable>
            <br/>
            <h5>Enrollment Process</h5>
            <input 
            type='checkbox' 
            name='inform_team'
            checked={!!inform_team} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='inform_team'>Team Informed of Enrollment</lable>
            <br/>
            <input 
            type='checkbox' 
            name='team_assigned'
            checked={!!team_assigned} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='team_assigned'>Team Assigned</lable>
            <br/>
            <input 
            type='checkbox' 
            name='telos_hq'
            checked={!!telos_hq} 
            onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
            />
            <lable for='telos_hq'>Loaded onto TelosHQ</lable>
        </section>
    )
}

here is referral where my checklist component is rendered:

import React, { useState, useEffect } from 'react';
import { Button } from '@material-ui/core';
import AddReferal from './AddReferal';
import { useHistory } from 'react-router';
import Checklist from './Checklist';
import Axios from 'axios';

export default function Referral(props) {
    const history = useHistory()
    const [editing, setEditing] = useState(false)
    const [checklist, setChecklist] = useState({})
    const { f_name, 
        l_name, 
        source, 
        ed_con, 
        therapist, 
        w_therapist, 
        created_at, 
        status, 
        color, 
        result,
        id 
    } = props.location.state.referral

    useEffect(()=> {
        Axios.get(`/api/referals/${id}/checklists`)
        .then(res => {
            console.log(res.data)
            setChecklist(res.data)
        })
        .catch(err => {
            console.log(err)
        })
    },[])

    const updateChecklist = (referralId, id, checklistObj) => {
        Axios.put(`/api/referals/${referralId}/checklists/${id}`, checklistObj)
        .then(res => {
            console.log(res.data)
            setChecklist(res.data)
        })
        .catch(err => {
            console.log(err.message)
        })
    }

    return (
        <div style={styles.page}>
            <div style={styles.sideBySide}>
                <div>
                    <h1><strong>{f_name} {l_name}</strong></h1>
                    <p>Source: {source} </p>
                    <p>Educational Consultant: {ed_con}</p>
                    <p>Wilderness Therapist: {w_therapist}</p>
                    <p>TelosU Therapist: {therapist}</p>
                    <p>Created at: {created_at}</p>
                    <Button onClick={() => setEditing(!editing)}>Edit</Button>
                    <Button onClick={() => props.deleteReferral(id, history)}>Delete</Button>
                </div>
                <Checklist 
                {...checklist}
                color={color} 
                setChecklist={setChecklist} 
                updateChecklist={updateChecklist}
                />
            </div>
            {editing && 
            <AddReferal  
            initF_name={f_name} 
            initL_name={l_name}
            initSource={source}
            initEd_con={ed_con}
            initTherapist={therapist}
            initW_therapist={w_therapist}
            initStatus={status}
            initColor={color}
            initResult={result} 
            editId = {id}/>}
        </div>
    )
}

const styles = {
    sideBySide: {
        display: 'flex',
        justifyContent:'space-between',
        alignItems: 'center',
    },
    page: {
        maxWidth:'95vw'
    }
}

Here is my checklist controller

class Api::ChecklistsController < ApplicationController
    before_action :set_checklist, only: [:update, :show]

    def index
        referal = Referal.find(params[:referal_id])
        render json: referal.checklist
    end 

    def show 
    end 

    def update
        @checklist.update(checklist_params)
        if @checklist.save
            render json: @checklist
        else
            render json: {errors: @checklist.errors, status: 422}
        end 
    end 

    private

    def set_checklist
        @checklist = Checklist.find(params[:id])
    end 

    def checklist_params
        params.require(:checklist).permit(
            :completed_app,
            :edcon_call,
            :enrollment,
            :inform_team,
            :parent_call,
            :parents,
            :recieve_testing,
            :review_testing,
            :staffing,
            :steps_to_enroll,
            :submitted_docs,
            :team_assigned,
            :telos_hq,
            :tour_scheduled,
            :vetting,
            :w_therapist_call
        )  
    end 
end

checklist is part of a has_one relationship with referrals so it is created in the referrals controller (i know referral is misspelled on the backend) with all values defaulted to false.

Any help would be much appreciated!