JSX fragment has no corresponding closing tag

I am trying to conditionally render some elements if the conditions equal true. But from my understanding it is giving me a "parsing error: adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?" right at line 35 at and below. I have my entire code wrapped in a React.Fragment tag. Please help. I’m not understandign why I am getting this error.

import './ProfilePage.css';
import JournalCard from '../../components/JournalCard/JournalCard';
import { Link } from 'react-router-dom';
import userService from '../../services/userService';

class ProfilePage extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return(
            <>
            <div className="profilePage">
            <div className="sign">
             <div className="zodiac-sign">{this.props.user.signs}</div>
               {this.props.user.signs === this.props.signs.sunSign ? 
               <div className="info">
                <div>image:{this.props.signs.image}</div>
                <div>sign: {this.props.signs.sunSign}
                <div>Birthdates:{this.props.signs.dates}</div>
                <div>Element:{this.props.signs.element}</div>
                <div>Planet:{this.props.signs.planet}</div>
               <div>Strengths:{this.props.signs.strengths}</div>
               <div>Weaknesses:{this.props.signs.weaknesses}</div>
               <div>Likes:{this.props.signs.likes}</div>
               <div>Dislikes:{this.props.signs.dislikes}</div>
               <div>Compatibility:{this.props.signs.compatiblity}</div>
                <div>Lucky Numbers:{this.props.sign.luckyNumbers}</div>
                </div>
                :
                <></>
               }
            </div>
            <div className="horoscope">
                <h2>Horoscope</h2>
                {this.props.user.signs === this.props.horoscopes.sign.name ? 
                <div className="horoscope-display">{this.props.horoscopes.result.description}</div>
                :
                <></>
            }
            </div>
            <div className="journal">
                <h3>Journal</h3>
                <div id="journal-box">
                    <div className="journal-display">
                        {this.props.journals.map(journal => 
                            <JournalCard
                                key={journal._id}
                                journal={journal}
                                handleDeleteJournal={this.props.handleDeleteJournal}
                            />
                        )}
                    </div>
                </div>
                <br/>
                <Link className="btn pink lighten-1"
                    to={{ pathname: '/journal' }}>
                        Add Journal Entry
                </Link>
                <br/>
            </div>
            </div>
            </>
        )        
    }
}


export default ProfilePage;```