setState on updating values on page - reactjs

Question

For the code below when the data is sent from the other page with the state I am trying to set default values and have the text be reflected one the page. The data is being successfully sent to the page but the constants aren't being updated with the useState hook. I checked several sources and still couldn't find a solution that helped this specific bug
Picture of the page
import React, {useEffect} from 'react';
import {Col, Container, Form, Row} from "react-bootstrap";
import Header from "./Header";
import Footer from "./Footer";
import {useState} from "react";
import {useLocation} from "react-router-dom";
import {render} from "react-dom";
const Bookings = () => {
/*Constants for ticket pricing*/
const [kingston_ticket_cost] = useState(180);
const [portland_ticket_cost] = useState(200);
const [negril_ticket_cost] = useState(280);
const [ochorios_ticket_cost] = useState(240);
const [montegobay_ticket_cost] = useState(260);
/*Initialize variables with initial state*/
const [fname, setFname] = useState("");
const [lname, setLname] = useState("");
const [phone, setPhone] = useState("");
const [email, setEmail] = useState("");
const [adultText, setAdultText] = useState("Adult");
const [adultTotal, setAdultTotal] = useState(0);
const [childText, setChildText] = useState("Child");
const [childTotal, setChildTotal] = useState(0);
const [total, setTotal] = useState(0);
const [adult_tickets, setAdultTickets] = useState(0);
const [children_tickets, setChildrenTickets] = useState(0);
const [kingston, setKingston] = useState(false);
const [portland, setPortland] = useState(false);
const [negril, setNegril] = useState(false);
const [ochorios, setOchorios] = useState(false);
const [montegobay, setMontegobay] = useState(false);
/*get information sent through artificial URL*/
let location = useLocation();
/*Set initial values*/
const set_init_val = (state) => {
let priceCounter = 0;
/*Set checkboxes based on what is sent over*/
if (location.state != null) {
setAdultTickets((adult_tickets) => location.state.adult_s);
setChildrenTickets((children_tickets) => location.state.child_s);
if (location.state.destination_s === "kingston" || location.state.destination_s === "all") {
setKingston(true);
priceCounter += kingston_ticket_cost;
if (priceCounter == 0) {
alert("Error : state not updated");
}
}
if (location.state.destination_s === "portland" || location.state.destination_s === "all") {
setPortland(true);
priceCounter += portland_ticket_cost;
}
if (location.state.destination_s === "negril" || location.state.destination_s === "all") {
setNegril(true);
priceCounter += negril_ticket_cost;
}
if (location.state.destination_s === "ochorios" || location.state.destination_s === "all") {
setOchorios(true);
priceCounter += ochorios_ticket_cost;
}
if (location.state.destination_s === "montegobay" || location.state.destination_s === "all") {
setMontegobay(true);
priceCounter += montegobay_ticket_cost;
}
setAdultTotal((adultTotal) => adult_tickets * priceCounter);
setChildTotal((childTotal) => children_tickets * ((adultTotal / adult_tickets) / 2));
setTotal((total) => adultTotal + childTotal);
} else {
return
}
return total;
}
useEffect(() => {
set_init_val()
}, []);
return (
<>
<Header/>
<Container>
<h1 className="booking_title">Book Your Next Adventure</h1>
<Form>
<Row>
<Col style={{padding: "50px"}}>
<h1 className="formheader">Booking Information</h1>
<div style={{padding: "15px"}}>
<Form.Group className={"mb-3"} style={{fontWeight: "bold"}}>
<Form.Label>First Name</Form.Label>
<Form.Control placeholder={"First name"} style={{width: "500px"}}/>
</Form.Group>
<Form.Group className={"mb-3"} style={{fontWeight: "bold"}}>
<Form.Label>Last Name</Form.Label>
<Form.Control placeholder={"Last name"} style={{width: "500px"}}/>
</Form.Group>
<Form.Group className={"mb-3"} style={{fontWeight: "bold"}}>
<Form.Label>Phone</Form.Label>
<Form.Control name={"phone"} placeholder={"000-000-0000"}
style={{width: "500px"}}/>
</Form.Group>
<Form.Group className={"mb-3"} style={{fontWeight: "bold"}}>
<Form.Label>Email</Form.Label>
<Form.Control placeholder={"email#email.com"}
style={{width: "500px"}}/>
</Form.Group>
<Form.Label style={{fontWeight: "bold"}}>Destinations</Form.Label>
{['checkbox'].map((type) => (
<div key={`default-${type}`} className="mb-3">
<Form.Check
id={`default-${type}`}
label={`Kingston $180`}
checked={kingston}
onChange={(e) => setKingston(!kingston)}
/>
<Form.Check
id={`default-${type}`}
label={`Portland $200`}
checked={portland}
onChange={(e) => setPortland(!portland)}
/>
<Form.Check
id={`default-${type}`}
label={`Negril $280`}
checked={negril}
onChange={(e) => setNegril(!negril)}
/>
<Form.Check
id={`default-${type}`}
label={`Ocho Rios $240`}
checked={ochorios}
onChange={(e) => setOchorios(!ochorios)}
/>
<Form.Check
id={`default-${type}`}
label={`Montego Bay $260`}
checked={montegobay}
onChange={(e) => setMontegobay(!montegobay)}
/>
</div>
))}
<Row>
<Col>
<Form.Label style={{fontWeight: "bold"}}>Adult</Form.Label>
<Form.Select value={adult_tickets}
onChange={(e) => setAdultTickets(parseInt(e.target.value))}>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</Form.Select>
</Col>
<Col>
<Form.Label style={{fontWeight: "bold"}}>Children</Form.Label>
<Form.Select value={children_tickets}
onChange={(e) => setChildrenTickets(parseInt(e.target.value))}>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</Form.Select>
</Col>
<Col>
<Form.Label style={{fontWeight: "bold"}}>Date</Form.Label>
<Form.Control type={"date"}/>
</Col>
</Row>
</div>
</Col>
<Col className={"paycol"} style={{padding: "50px"}}>
<h1 className="formheader">Payment Information</h1>
<div className={"totals"} style={{padding: "15px"}}>
<Row>
<Col>{adultText}</Col>
<Col>${adultTotal}</Col>
</Row>
<Row>
<Col>{childText}</Col>
<Col>${childTotal}</Col>
</Row>
<Row>
<Col>Total</Col>
<Col>${total}</Col>
</Row>
</div>
<div style={{marginTop: "50px"}}>
<Form.Label style={{fontWeight: "bold"}}>Credit/Debit Card number</Form.Label>
<Form.Control placeholder={"0000 0000 0000 0000"}/>
<Row style={{marginTop: "50px"}}>
<Col>
<Form.Label style={{fontWeight: "bold"}}>Exp month</Form.Label>
<Form.Select>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</Form.Select>
</Col>
<Col>
<Form.Label style={{fontWeight: "bold"}}>Exp Year</Form.Label>
<Form.Select>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
</Form.Select>
</Col>
<Col>
<Form.Label style={{fontWeight: "bold"}}>CVC</Form.Label>
<Form.Control placeholder={"000"}/>
</Col>
</Row>
</div>
<br/><br/>
<div className="checkbox pcheck">
<label htmlFor="destinations-1">
<input type="checkbox" id="cash"/>
<b> Pay with with cash</b> <br/><br/>
<h3>By paying with cash I agree to advise my tour guide 30 minutes ahead of time
that I need to complete payment</h3>
</label>
</div>
</Col>
</Row>
</Form>
</Container>
<Footer/>
</>
);
};
export default Bookings;