Working on a CRUD MERN stack app, trying to implement a Like function for individual posts

This is my first time asking a question on StackOverFlow, and i'm a real noob. So please be gentle with me lol. I am trying to create a CRUD app with the MERN stack that generates individual posts, in the form of "cards", and i'm trying to implement like counts for each individual card/post. I've tried very hard to follow tutorials and read other stackoverflow problems, and I have not found the answer I needed. I am losing my mind, can someone please give me some guidance? Code below...

My React.js front end code (I put the main problems i'm focusing on in Bold with the asterisks)

import React, { useState, useEffect} from 'react';
import './Experiences.css'
import Axios from 'axios';
import Space from './images/space.jpg'

function Experiences() {
    const [listExperience, setListExperience] = useState([]);
    const [location, setLocation] = useState("")
    const [picClicked, setPicClicked] = useState(false)
    
    useEffect(() => {
        Axios.get('http://localhost:9001/getExperiences')
            .then((response) => {setListExperience(response.data)})
    }, []);

    const createExperience = (e) => {
        e.preventDefault();

        Axios.post('http://localhost:9001/createExperience', {location,})
            .then((response) => {setListExperience([...listExperience,{location}])})
    }        

    **const updateLike = (id) => {
       Axios.put(`http://localhost:9001/likePost/${id}`).then(
            () => {
                setListExperience(listExperience.map((hmm) => {
                   return hmm._id === id ? id : hmm
            }))
            }
        )**

    }

    const cardStyles = {
        background: "#ffffff",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        width: "161px",
        height: "180px",
        marginLeft: "30px",
        marginRight: "30px",
        marginTop: "20px",
        position: "relative",
    }

    return (
        <>
        <div className='form--contain'>
            <div className='form--card'>
                <form onSubmit={createExperience}>
                    <textarea type='text' onChange={(event) => {setLocation(event.target.value)}} />
                    <button type='submit'>Submit</button>
                </form>
            </div>
            <div className='experience--container'>
                {listExperience.map((x, id) => 
                    <div key={id}>
                        {picClicked === false ?
                        <div key={x.id} className={`experience--card$`} style={cardStyles}>
                            <div className="condRender" onClick={() => setPicClicked(true)}>
                                <div className='locate'>
                                    {x.location}
                                </div>
                                <div className='image' style={ { display: "flex", justifyContent: "center"} }  >
                                    <img src={x.image} alt='pic' style={ { maxWidth: "100%", maxHeight:"100%", overflow: "hidden", marginBottom: "20px"} } height={125} />
                                </div> 
                            </div> 
                            
                            <div className={picClicked === true ?'likeBtnContainer-hidden' : 'likeBtnContainer'}>
                                <button className='likeBtn' type='button' onClick={updateLike(x._id)}>Like</button>
                                <div className='count'>{x.likeCount}</div>
                            </div>
                        </div>
                        : <img src={Space} alt='space' height={200} width={200} onClick={() => setPicClicked(false)}/> }
                    </div>
                )}
            </div>
        </div>
        </>
    )
}

export default Experiences

My Express.js controllers

exports.likePost = async (req, res) => {
    const id = req.body.id;

    if(!mongoose.Types.ObjectId.isValid(id)) return res.status(404).send(`No post with id: ${id}`);

    const listExperience = await ExperiencesModel.findById(id);

    const updatedExperience = await ExperiencesModel.findByIdAndUpdate(id, {likeCount: listExperience.likeCount + 1}, {new: true});

    res.json(updatedExperience)
}

My MongoDB

const mongoose = require('mongoose');

const ExperiencesSchema = new mongoose.Schema({
    location: {
        type: String,
        required: true,
    },
    likeCount: {
        type: Number,
        default: 0,
    },
})

const ExperiencesModel = mongoose.model('experiences', ExperiencesSchema);
module.exports = ExperiencesModel;

I know it's a lot of code, and I know the best practice to break my React.js into smaller component files, but i'm just trying to get my likes to work, for each individual post. I honestly don't know what i'm doing, and just winging it. Can someone please help? Or tell me what reformatting to my code I need to do? All i'm trying to do is get it to where I can like each individual card/post, like a Facebook like on a post. Thank you.