validateDOMNesting(...): <div> cannot appear as a child of <tr>. at div at TitleCell

[rajshah2399]

can anyone please help me with this, Thanks ..!!

in Title cell components
before I implement my code, it's working fine with this code

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Breadcrumb from '../../../components/Breadcrumb';

const StyledTitle = styled.divcolor: #091219; font-size: 1.125rem; font-weight: Bold; width: max-content; max-width: 250px; white-space: pre-line;;
const TypeRow = styled.divdisplay: flex; justify-content: space-between;;
const TypeHeader = styled.h4margin-bottom: 0px;;

const TitleCell = ({ type, title, versionId }) => (


{type}


{title}

);

TitleCell.propTypes = {
type: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
versionId: PropTypes.string.isRequired,
};

export default TitleCell;

but I need to add tag and add href into this so changed this code to

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useStore } from 'react-redux';
import { useQuery } from '@apollo/client';
import { Button } from '@twigeducation/ts-fe-components';
import Breadcrumb from '../../../components/Breadcrumb';
import { breadcrumbsQuery } from '../../../components/Breadcrumb/Breadcrumbs.query';

const StyledTitle = styled.divcolor: #091219; font-size: 1.125rem; font-weight: Bold; width: max-content; max-width: 250px; white-space: pre-line;;
const TypeRow = styled.divdisplay: flex; justify-content: space-between;;
const TypeHeader = styled.h4margin-bottom: 0px;;

const BreadcrumbLink = styled.atext-decoration: inherit; color: inherit; cursor: pointer; &:visited{ text-decoration: inherit; color: inherit; cursor: pointer; } &:hover{ text-decoration: inherit; color: inherit; cursor: pointer; };

const TitleCell = ({ type, title, versionId }) => {
const { subscriptions } = useStore().getState();
const { loading, data, error } = useQuery(breadcrumbsQuery, {
variables: {
applicationId: subscriptions?.product?.tocsApp,
versionId,
},
});

if (loading) {
    return <div data-at="loading" />;
}

if (error || !data.studentSession) {
    return null;
}
return (
    <table>
        <tbody>
            <td>
                <BreadcrumbLink
                    href={`/student-session/${data.studentSession.attributes.slug}/${btoa(
                        versionId,
                    )}`}
                >
                    <TypeRow>
                        <TypeHeader data-at="title-type-cell">{type}</TypeHeader>
                        <Breadcrumb from="titlecell" versionId={versionId} />
                    </TypeRow>
                    <StyledTitle data-at="title-header-cell">{title}</StyledTitle>
                </BreadcrumbLink>
            </td>
        </tbody>
    </table>

);

};

TitleCell.propTypes = {
type: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
versionId: PropTypes.string.isRequired,
};

export default TitleCell;

and it gave me errors on both sides ln browser console or in react test part. i just need to add a tag in top.